VwBwmvB

pulsing-green-circle.html

<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>
 
 <div class="container">
  <div class="row">
    <div class="container">
      <div class="row">
        <style>
          .pinkBg {
            background-color: #35ad50 !important;
            background-image: linear-gradient(90deg, #3d834d, #60f38d);
          }

          .intro-banner-vdo-play-btn {
            height: 60px;
            width: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            margin: -30px 0 0 -30px;
            border-radius: 100px;
            z-index: 1
          }

          .intro-banner-vdo-play-btn i {
            line-height: 56px;
            font-size: 30px
          }

          .intro-banner-vdo-play-btn .ripple {
            position: absolute;
            width: 160px;
            height: 160px;
            z-index: -1;
            left: 50%;
            top: 50%;
            opacity: 0;
            margin: -80px 0 0 -80px;
            border-radius: 100px;
            -webkit-animation: ripple 1.8s infinite;
            animation: ripple 1.8s infinite
          }

          @-webkit-keyframes ripple {
            0% {
              opacity: 1;
              -webkit-transform: scale(0);
              transform: scale(0)
            }

            100% {
              opacity: 0;
              -webkit-transform: scale(1);
              transform: scale(1)
            }
          }

          @keyframes ripple {
            0% {
              opacity: 1;
              -webkit-transform: scale(0);
              transform: scale(0)
            }

            100% {
              opacity: 0;
              -webkit-transform: scale(1);
              transform: scale(1)
            }
          }

          .intro-banner-vdo-play-btn .ripple:nth-child(2) {
            animation-delay: .3s;
            -webkit-animation-delay: .3s
          }

          .intro-banner-vdo-play-btn .ripple:nth-child(3) {
            animation-delay: .6s;
            -webkit-animation-delay: .6s
          }
        </style>
        <a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
          <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
          <span class="ripple pinkBg"></span>
          <span class="ripple pinkBg"></span>
          <span class="ripple pinkBg"></span>
        </a>
      </div>
    </div>
  </div>

vwbwmvb.markdown

Pulsing effect green circle animation

A Pen by Shreya on CodePen.

License.