voice swearch

by bhupendra negi

HTML

<div class=container>
  <div class=outer-2></div>
  <i class=icon-microphone></i>
</div>

CSS

@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);

.container {
  width:75px;
  background-color:#2F7FA5;
  display:block;
  margin:100px auto 0px auto;
  border-radius:100%;
  box-shadow:0px 0px 15px 2px #bdc3c7;
  cursor:pointer;
  transition:.3s all ease-in;
  position:relative;
}

.icon-microphone {
  color:transparent;
    line-height:75px;
  display:block;
  text-align:center;
  transition:.1s all ease-in;
}



.outer-2 {
  width:75px;
  height:75px;
  -webkit-transform:scale(1);
  border-radius:50%;
  position:absolute;
  background-color:#bdc3c7;
  z-index:-1;
  transition:1s all ease;
  -webkit-animation: woong-2 1s infinite;
   -webkit-animation-delay:2s;
}

@-webkit-keyframes woong {
  0% { -webkit-trasform:scale(1.2); }
  50% { -webkit-transform:scale(1.8);
      opacity:0.5;
  }
  100% { -webkit-transform:scale(2.4);
    opacity:0; }
}

@-webkit-keyframes woong-2 {
  0% { -webkit-transform:scale(1.2);
      opacity:0.6; }
  50% { -webkit-transform:scale(1.6);
      opacity:0.5;
  }
  100% { -webkit-transform:scale(2);
    opacity:0; }
}


.container:hover .outer {
  -webkit-transform:scale(2.3);
  opacity:0;
}

.container:hover {
  background-color:#27ae60;
}

.container:active {
  background-color:#e74c3c;
}

.container:active .icon-microphone {
  color:#ecf0f1;
}