"Bootstrap Material style Button"
Bootstrap 4.0.0 Snippet by aaqib33

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--This pen by Bootstrapthemes.co --> <div class="jumbotron"> <div class="container text-center"> <a href="http://bootsnipp.com/fullscreen/1mo8Z" target="_blank"> Check full page </a> </div> </div> <div class="container"> <div class="row"> <h2 id="buttons-options"></h2> <p> <p>Button ripple</p> <button type="button" class="btn btn-default bt bt-ripple">Default</button> <button type="button" class="btn btn-primary bt bt-ripple">Primary</button> <button type="button" class="btn btn-info bt bt-ripple">Info</button> <button type="button" class="btn btn-success bt bt-ripple">Success</button> <button type="button" class="btn btn-warning bt bt-ripple">Success</button> <button type="button" class="btn btn-danger bt bt-ripple">Success</button> <button type="button" class="btn btn-link bt bt-ripple">Link</button> </p> <p> <p>Button ripple with raised</p> <button type="button" class="btn btn-default bt bt-raised bt-ripple ">Default</button> <button type="button" class="btn btn-primary bt bt-raised bt-ripple ">Primary</button> <button type="button" class="btn btn-info bt bt-raised bt-ripple ">Info</button> <button type="button" class="btn btn-success bt bt-raised bt-ripple ">Success</button> <button type="button" class="btn btn-warning bt bt-raised bt-ripple ">Warning</button> <button type="button" class="btn btn-danger bt bt-raised bt-ripple ">Danger</button> <button type="button" class="btn btn-link bt bt-raised bt-ripple ">Link</button> </p> <div class="col-md-6"> <h2>Button group</h2> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-success bt bt-ripple">Left</button> <button type="button" class="btn btn-primary bt bt-ripple">Middle</button> <button type="button" class="btn btn-info bt bt-ripple">Right</button> </div> </div> <div class="col-md-6"> <h2>Button group</h2> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-success bt bt-ripple bt-raised">Left</button> <button type="button" class="btn btn-primary bt bt-ripple bt-raised">Middle</button> <button type="button" class="btn btn-info bt bt-ripple bt-raised">Right</button> </div> </div> <div class="col-md-6"> <h2>Button block</h2> <button type="button" class="btn btn-default btn-lg btn-block bt bt-ripple">Block level button</button> <button type="button" class="btn btn-primary btn-lg btn-block bt bt-ripple">Block level button</button> <button type="button" class="btn btn-info btn-block bt bt-ripple">Info</button> <button type="button" class="btn btn-success btn-block bt bt-ripple">Success</button> <button type="button" class="btn btn-warning btn-block bt bt-ripple">Success</button> <button type="button" class="btn btn-danger btn-block bt bt-ripple">Success</button> <button type="button" class="btn btn-link btn-block bt bt-ripple">Link</button> </div> <div class="col-md-6"> <h2>Button block</h2> <button type="button" class="btn btn-default btn-lg btn-block bt bt-ripple bt-raised">Block level button</button> <button type="button" class="btn btn-primary btn-lg btn-block bt bt-ripple bt-raised">Block level button</button> <button type="button" class="btn btn-info btn-block bt bt-ripple bt-raised">Info</button> <button type="button" class="btn btn-success btn-block bt bt-ripple bt-raised">Success</button> <button type="button" class="btn btn-warning btn-block bt bt-ripple bt-raised">Success</button> <button type="button" class="btn btn-danger btn-block bt bt-ripple bt-raised">Success</button> <button type="button" class="btn btn-link btn-block bt bt-ripple bt-raised">Link</button> </div> </div> </div> <div style="text-align: center;margin-top: 150px; margin-bottom:100px; font-size:18px"> | <a href="https://bootstrapthemes.co/"target="_blank"> Snippet By Bootstrapthemes.co </a> |</div>
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic"; /* + BUTTONS ===================================== */ .bt { font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif; font-size: 16px; padding: 10px 20px; font-weight: 400; text-transform: uppercase; letter-spacing: inherit; color: rgba(255, 255, 255, 0.87); outline: 0; outline-offset: 0; border: 0; border-radius: 2px; -o-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .btn:focus, .btn:active, .btn.active, .btn:active:focus, .btn.active:focus { outline: 0; outline-offset: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .btn-default, .btn-link { color: rgba(0, 0, 0, 0.87); } .btn-default:hover, .btn-link:hover, .btn-default:focus, .btn-link:focus { color: #2d9bc1; opacity: 1; } /* + RIPPLE EFFECT ===================================== */ .bt-ripple { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .ripple { display: block; position: absolute; pointer-events: none; border-radius: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background: #ffffff; opacity: 1; } .ripple.animate { -webkit-animation: ripple .5s linear; -moz-animation: ripple .5s linear; -o-animation: ripple .5s linear; animation: ripple .5s linear; } @keyframes ripple { 100% { opacity: 0; -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5); } } @-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); } } @-moz-keyframes ripple { 100% { opacity: 0; -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5); } } @-ms-keyframes ripple { 100% { opacity: 0; -ms-transform: scale(2.5); transform: scale(2.5); } } @-o-keyframes ripple { 100% { opacity: 0; -o-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5); } } /* Buttons types */ .bt-raised { -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); } .bt-raised:active, .bt-raised.active, .bt-raised:active:focus, .bt-raised.active:focus { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .bt-raised:focus { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
// Bootstrap Material Style button by Bootstrapthemes.co (function($) { $(".bt-ripple").click(function(e) { var rippler = $(this); // create .ink element if it doesn't exist if (rippler.find(".ripple").length == 0) { rippler.append("<span class='ripple'></span>"); } var ink = rippler.find(".ripple"); // prevent quick double clicks ink.removeClass("animate"); // set .ripple diametr if (!ink.height() && !ink.width()) { var d = Math.max(rippler.outerWidth(), rippler.outerHeight()); ink.css({ height: d, width: d }); } // get click coordinates var x = e.pageX - rippler.offset().left - ink.width() / 2; var y = e.pageY - rippler.offset().top - ink.height() / 2; // set .ripple position and add class .animate ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate"); }); })(jQuery);

Related: See More


Questions / Comments: