Ripple Effect in Button

by Aashish Manandhar

HTML

<div class="btn">
  <div class="btn-text">HOVER OVER ME</div>
</div>

SCSS

body {
  background: white;
  margin: 0;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
  font-family: sans-serif;
}

.btn {
  cursor: pointer;
  position: relative;
  z-index: 0;
  
  /* overflow hidden to hide overflown ::before contents */
  overflow: hidden;
  background: #2196F3;
  border-radius: 2px;
  color: white;
  padding: 8px 32px;
  &::before {
    -webkit-clip-path: circle(0% at 50% 50%);
    transition: all 0.5s ease-in-out;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    opacity: 0.4;
    background: #1976D2;
    padding: 18px 0;
  }
  &:hover {
    &::before {
      -webkit-clip-path: circle(100%);
      opacity: 1;
    }
 }
  .btn-text {
    position: relative;
   }
}