Button Ripple Animation

I tried to create this effect based on material design buttons on android devices. Just using simple CSS and JavaScript.

HTML

<button type="button" class="button red"> Ripple Effect </button>
<button type="button" class="button blue"> Ripple Effect </button>
<button type="button" class="button green"> Ripple Effect </button>
<button type="button" class="button orange"> Ripple Effect </button>

CSS/SCSS

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;
  align-content: center;
}

.button {
  margin: 10px;
  padding: 10px 20px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.button.red {
  color: red;
  border-color: red;
}
.button.red .ripple_effect {
  background-color: #ff000080;
}
.button.blue {
  color: blue;
  border-color: blue;
}
.button.blue .ripple_effect {
  background-color: #0000ff80;
}
.button.green {
  color: green;
  border-color: green;
}
.button.green .ripple_effect {
  background-color: #00800080;
}
.button.orange {
  color: orange;
  border-color: orange;
}
.button.orange .ripple_effect {
  background-color: #ffa50080;
}
.button:focus {
  outline: none;
}
.button .ripple_effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple_effect 0.4s linear;
}

@keyframes ripple_effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

SCSS

$color-primary:  #eb4d4b;
$color-white: #ffffff;
$color-white-transparent: #ffffff54;
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;
  align-content: center;
}
.button {
  margin: 10px;
  padding: 10px 20px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  &.red {
    color: red;
    border-color: red;
    .ripple_effect {
      background-color: #ff000080;
    }
  }
  &.blue {
    color: blue;
    border-color: blue;
    .ripple_effect {
      background-color: #0000ff80;
    }
  }
  &.green {
    color: green;
    border-color: green;
    .ripple_effect {
      background-color: #00800080;
    }
  }
  &.orange {
    color: orange;
    border-color: orange;
    .ripple_effect {
      background-color: #ffa50080;
    }
  }
  &:focus {
    outline: none;
  }
  .ripple_effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple_effect 0.4s linear;
  }
}

@keyframes ripple_effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

JavaScript

$(document).on('click', '.button', function(e) {
  var element = document.createElement('DIV');
  var current = $(this);
  var offset = current.offset();
  var max = Math.max(current.width(), current.height());
  $(element).width(max);
  $(element).height(max);
  $(element).css({
    'left': e.clientX - offset.left - max/2 + 'px',
    'top': e.clientY - offset.top - max/2 + 'px'
  });
  current.prepend(element);
  $(element).addClass('ripple_effect');
  setTimeout(function(){
    $(element).remove();
  },500);
});

That's it.

You can check working demo here Codepen.

Blog

Button Ripple Animation

Raghav Bhardwaj

HTML

CSS/SCSS

JavaScript

Join Our Newsletter. No Spam, Only the good stuff.

Related