"Buttan"
Bootstrap 4.1.1 Snippet by dkstudio

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <button class="pulse-button"></button> </div> </div>
.pulse-button { width: 60px; height: 60px; border: none; box-shadow: 0 0 0 0 rgba(251, 86, 7, 0.5); cursor: pointer; -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); background: transparent url(../img/master/play-btn.png) center center no-repeat; background-color: #FB5607; transform: translate(-50%, -50%); text-align: center; border-radius: 50%; position: absolute; top: 50%; left: 50%; } .pulse-button:hover { -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none; } @-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

Related: See More


Questions / Comments: