"Untitled"
Bootstrap 4.1.1 Snippet by iammohitverma

<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 ----------> <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"> <div class="wrapper"> <div class="example-1">Example 1</div> <div class="example-2">Example 2</div> <div class="example-3">Example 3</div> </div> <div style="clear: both;"></div> </div> </div>
.wrapper { padding: 20px; } @keyframes shadow-pulse { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); } 100% { box-shadow: 0 0 0 35px rgba(0, 0, 0, 0); } } @keyframes shadow-pulse-big { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0 0 0 70px rgba(0, 0, 0, 0); } } .example-1 { float: left; margin: 40px; width: 130px; height: 130px; font: 13px/130px 'Barlow Semi Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-align: center; background: rgba(30, 144, 255, 0.6); border-radius: 50%; animation: shadow-pulse 1s infinite; } .example-2 { float: left; margin: 75px 40px 0 40px; width: 130px; height: 60px; font: 13px/60px 'Barlow Semi Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-align: center; background: rgba(3, 3, 3, 0.6); border-radius: 3px; animation: shadow-pulse 1s 3; } .example-3 { float: left; margin: 40px 0 0 40px; width: 130px; height: 130px; font: 13px/130px 'Barlow Semi Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-align: center; background: rgba(30, 144, 255, 0.6); border-radius: 50%; animation: shadow-pulse-big 1s 1; } Resources

Related: See More


Questions / Comments: