Press "Enter" to skip to content

Simple Webpage Design to Get Button Ripple Effect on Click

Button ripple effect is a simple JavaScript implementation of the material design-inspired button ripple effect. Hone your skills by building 50 fast, unique, and fun mini-projects.

button ripple effect code, button ripple effect on click using css3 vanilla javascript, material button ripple effect, circle ripple animation css, button ripple effect css

How to make use of it:

1. Required CSS styles for the ripple effect.

button .circle {
  position: absolute;
  background-color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: scale 0.5s ease-out;
}

@keyframes scale {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

2. Attach a corrugated click effect to all buttons using the CSS class for ‘ripple’.

<button class="ripple">Click Me</button>
const buttons = document.querySelectorAll('.ripple')
buttons.forEach(button => {
    button.addEventListener('click', function (e) {
        const x = e.clientX
        const y = e.clientY
        const buttonTop = e.target.offsetTop
        const buttonLeft = e.target.offsetLeft
        const xInside = x - buttonLeft
        const yInside = y - buttonTop
        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = yInside + 'px'
        circle.style.left = xInside + 'px'
        this.appendChild(circle)
        setTimeout(() => circle.remove(), 500)
    })
})

Button Ripple Effect On Click, buttonrippleeffect Plugin/Github, button ripple effect css only


See Demo And Download

Official Website(mydever): Click Here

This superior jQuery/javascript plugin is developed by mydever. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.