<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"> <a id="play-video" class="video-play-button" href="#"> <span></span></a> </div> </div>

.video-play-button { position: absolute; z-index: 10; top: 100%; left: 61%; transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block; width: 15px; height: 12px; background: #b50201; border-radius: 50%; padding: 9px 24px 18px 28px; } .video-play-button:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 75px; height: 75px; background: #b50201; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; } .video-play-button:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 70px; height: 70px; background: #b50201; border-radius: 50%; transition: all 200ms; border: solid 4px #fff; } .video-play-button span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 12px solid transparent; } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } }