Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     .btn-ripple {
      padding:18px 40px;
      background:Coral;
      cursor: pointer;
     }
     .btn-ripple:hover {
      background: #33CBCC radial-gradient(circle, transparent 1%, #33CBCC 23%) center/1000%;
     }
     .btn-ripple {
      background-position: center;
      transition: background 1s;
     }
     .btn-ripple:active {
      background-color: black;
      transition: background 0.1s;
     }
    </style>
  </head>
  <body>
    <h2> Button with ripple effect</h2>
    <button class="btn-ripple">Button: Hover and Click</button>
  </body>
</html>
​