How can I implement a ripple style on button press

Question

Hello, I'm learning CSS and was wondering how can I implement the styling above. What kind of effect/style is it called?

I've never implemented something like that before so I don't know where to even start.

Answer 1

Can also be achieved using JS and CSS classes

<div class='button'></div>

CSS

.button {
  width: 220px;
  height: 70px;
  background-color:blue;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

JS

function buttonClick() {
  var buttons = document.querySelectorAll('.button')
  Array.prototype.forEach.call(buttons, function(button) {
    button.addEventListener('click', createRipple)
  })
}

function createRipple(element) {
  var circle = document.createElement('div')
  this.appendChild(circle)
  var dimensions = Math.max(this.clientWidth, this.clientHeight)
  circle.style.width = circle.style.height = dimensions + 'px'
  circle.style.left = element.clientX - this.offsetLeft - dimensions / 2 + 'px'
  circle.style.top = element.clientY - this.offsetTop - dimensions / 2 + 'px'
  circle.classList.add('ripple')
  circle.addEventListener('animationend', () => {
    circle.remove()
  })
}

Answer 2

I have implemented something. Which is very resembles the design you have shared.

.button {
        position: relative;
        padding: 20px 25px;
        background: #0977d0;
        color: #fff;
        border: 0;
        font-size: 14px;
        font-weight: 700;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
      }
      .button:before {
        width: 20px;
        height: 20px;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transition: all 0.4s ease-in-out;
        opacity: 0;
      }
      .button span {
        position: relative;
        z-index: 1;
      }
      .button:hover::before {
        width: 70px;
        height: 70px;
        opacity: 1;
      }

<button class="button"><span>Pressed</span></button>

Answer 3

<button>Click Me!</button>

And Css code

<style type="text/css">
    @keyframes gradient {
  0% {
    background: radial-gradient(circle at center, rgba( 255, 125 , 125, 0 ) 0%, #fff 0%, #fff 100%);
  }
  25% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.3 ) 24%, #fff 25%, #fff 100%);
  }
  50% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.5 ) 49%, #fff 50%, #fff 100%);
  }
  75% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.8 ) 74%, #fff 75%, #fff 100%);
  }
  100% {
    color: #fff;
    background: radial-gradient(circle at center, #f88 99%, #fff 100%, #fff 100%);
  }
}

body {
  background: #68d;
}
button {
  margin-left: calc( 50vw - 175px );
  margin-top: calc( 50vh - 30px );
  width: 350px;
  height: 60px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-weight: bold;
  font-size: 1.1em;
  color: #666;
  box-shadow: 0 6px 6px #06f;
  outline: none;
}
button:active {
  /* set time duration to your needs */
  animation: gradient 100ms;
  background: #f88;
  color: #fff;
  box-shadow: none;
}
</style>