MariaJackson1
7/28/2017 - 6:30 PM

Animated Button

<div class="availability-wrap">
    <div class="availability"></div>
</div>
  
  
  ================CSS=======================
  
  .availability-wrap {
    margin-left: 250px;
    height: 200px;
    width: 200px;
    box-shadow: 10px 40px 60px -20px rgba(0,0,0,0.2);
}

.availability {
  width: 50px;
  height: 50px;
  background: rgba(195, 13, 189, 0.23);
  border-radius: 50%;
  position: relative;
  margin: 40px;
  display: inline-block;
}

.availability:before, .availability:after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #c30dbd;
  position: absolute;
  animation: pulse 3s linear infinite;
  opacity: 1;
  }

@keyframes pulse { 
  0%
   {transform: scale(0);
     opacity: 1;}
    
  100%
    {transform: scale(1.3);
    opacity: 0;}
 }