Forem: Raghav Bhardwaj

Mirror Shine on Hover

Raghav Bhardwaj — Sat, 13 Aug 2022 04:05:19 +0000

Today, I am going to show you how to create mirror shine effect on hover.

HTML

<div class="glass-shine-effect"></div>

Important thing to note is :before and :hover styling.

SCSS

.glass-shine-effect {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(107, 107, 107, 0.37);
  backdrop-filter: blur(6px); // Just for effect
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  height: 125px;
  width: 125px;
  cursor: pointer;
  position: relative;
  transition: transform 200ms ease;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    height: 150%;
    width: 50px;
    transform: rotate(30deg);
    background-color: rgba(255, 255, 255, 0.2);
    left: -100px;
  }
  &:hover {
    transform: scale(1.1);
    &:before {
      transition: left 500ms ease;
      left: 170px;
    }
  }
}

CSS

.glass-shine-effect {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(107, 107, 107, 0.37);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  width: 125px;
  cursor: pointer;
  position: relative;
  transition: transform 200ms ease;
  overflow: hidden;
}
.glass-shine-effect:before {
  content: "";
  position: absolute;
  height: 150%;
  width: 50px;
  transform: rotate(30deg);
  background-color: rgba(255, 255, 255, 0.2);
  left: -100px;
}
.glass-shine-effect:hover {
  transform: scale(1.1);
}
.glass-shine-effect:hover:before {
  transition: left 500ms ease;
  left: 170px;
}

That's it. You can check out working demo here on codepen.

Animated Cursor

Raghav Bhardwaj — Fri, 22 Jul 2022 11:25:00 +0000

A simple way to create animated cursor with CSS and JavaScript. You can update style for the cursor.

CSS

* {
  cursor: none;
}
#mouse-pointer {
  position: fixed;
  left: -50px;
  top: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #bbbbbb;
  z-index: 99;
  pointer-events: none;
}

#center-point {
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(101, 101, 101);
  border-radius: 6px;
  position: fixed;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  transition: transform 100ms linear;
  z-index: 99;
}

JavaScript

const pointer = document.createElement("DIV");
pointer.id = "mouse-pointer";
const centerPointer = document.createElement("DIV");
centerPointer.id = "center-point";
document.body.appendChild(pointer);
document.body.appendChild(centerPointer);

document.onmousemove = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.left = event.clientX - 2 + "px";
    centerPointer.style.top = event.clientY - 2 + "px";
  });
  setTimeout(() => {
    requestAnimationFrame(() => {
      pointer.style.left = event.clientX - 25 + "px";
      pointer.style.top = event.clientY - 25 + "px";
    });
  }, 100);
};

document.onmousedown = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1.3)";
  });
};

document.onmouseup = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1)";
  });
};

That's it.

You can check working demo here Codepen.

Neon Buttons with hover effect

Raghav Bhardwaj — Fri, 22 Jul 2022 11:03:00 +0000

Simple Neon Button with hover effect. Just plain css and html code. Implemented this few years back, thought I should share it.

HTML

<button type="button" id="info">Info</button>
<button type="button" id="success">Success</button>
<button type="button" id="warning">Warning</button>
<button type="button" id="error">Error</button>
<button type="button" id="default">Default</button>

CSS/SCSS

CSS

body button {
  box-sizing: border-box;
  cursor: pointer;
  color: #FFFFFF;
  padding: 10px 20px;
  margin: 10px;
  font-size: 20px;
  border: none;
  border-radius: 6px;
}
body button#info {
  background-color: #0652DD;
  border: 5px solid #1d6bf9;
  box-shadow: 8px 8px 10px 0px #043693;
}
body button#info:hover {
  transform: translate(8px, 8px);
  border: 5px solid #043693;
  box-shadow: inset 0px 0px 26px 1px #0540ab;
}
body button#success {
  background-color: #A3CB38;
  border: 5px solid #b6d660;
  box-shadow: 8px 8px 10px 0px #749126;
}
body button#success:hover {
  transform: translate(8px, 8px);
  border: 5px solid #749126;
  box-shadow: inset 0px 0px 26px 1px #84a52b;
}
body button#warning {
  background-color: #F79F1F;
  border: 5px solid #f9b450;
  box-shadow: 8px 8px 10px 0px #c37607;
}
body button#warning:hover {
  transform: translate(8px, 8px);
  border: 5px solid #c37607;
  box-shadow: inset 0px 0px 26px 1px #db8508;
}
body button#error {
  background-color: #EA2027;
  border: 5px solid #ee4f54;
  box-shadow: 8px 8px 10px 0px #ad1016;
}
body button#error:hover {
  transform: translate(8px, 8px);
  border: 5px solid #ad1016;
  box-shadow: inset 0px 0px 26px 1px #c41319;
}
body button#default {
  background-color: #EE5A24;
  border: 5px solid #f27e53;
  box-shadow: 8px 8px 10px 0px #b73b0e;
}
body button#default:hover {
  transform: translate(8px, 8px);
  border: 5px solid #b73b0e;
  box-shadow: inset 0px 0px 26px 1px #cf4310;
}

SCSS

body {
  button {
    box-sizing: border-box;
    cursor: pointer;
    color: #ffffff;
    padding: 10px 20px;
    margin: 10px;
    font-size: 20px;
    border: none;
    border-radius: 6px;
  }
  button#info {
    background-color: #0652dd;
    border: 5px solid #1d6bf9;
    box-shadow: 8px 8px 10px 0px #043693;
    &:hover {
      transform: translate(8px, 8px);
      border: 5px solid #043693;
      box-shadow: inset 0px 0px 26px 1px #0540ab;
    }
  }
  button#success {
    background-color: #a3cb38;
    border: 5px solid #b6d660;
    box-shadow: 8px 8px 10px 0px #749126;
    &:hover {
      transform: translate(8px, 8px);
      border: 5px solid #749126;
      box-shadow: inset 0px 0px 26px 1px #84a52b;
    }
  }
  button#warning {
    background-color: #f79f1f;
    border: 5px solid #f9b450;
    box-shadow: 8px 8px 10px 0px #c37607;
    &:hover {
      transform: translate(8px, 8px);
      border: 5px solid #c37607;
      box-shadow: inset 0px 0px 26px 1px #db8508;
    }
  }
  button#error {
    background-color: #ea2027;
    border: 5px solid #ee4f54;
    box-shadow: 8px 8px 10px 0px #ad1016;
    &:hover {
      transform: translate(8px, 8px);
      border: 5px solid #ad1016;
      box-shadow: inset 0px 0px 26px 1px #c41319;
    }
  }
  button#default {
    background-color: #ee5a24;
    border: 5px solid #f27e53;
    box-shadow: 8px 8px 10px 0px #b73b0e;
    &:hover {
      transform: translate(8px, 8px);
      border: 5px solid #b73b0e;
      box-shadow: inset 0px 0px 26px 1px #cf4310;
    }
  }
}

That's it.

You can check working demo here Codepen.

Pure CSS Loader

Raghav Bhardwaj — Fri, 22 Jul 2022 10:58:00 +0000

A simple CSS only loader. Just using span and css animation. you can update the color by replacing background.

HTML/Pug

HTML

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Pug

.loader
  - for (var i = 1; i <= 17; i++) 
    span

CSS/SCSS

CSS

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

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.loader span {
  margin: 2px;
  display: block;
  background: #ff6800;
  width: 10px;
  border-radius: 10px;
}
.loader span:nth-child(1) {
  -webkit-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -4s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(2) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(3) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(4) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(5) {
  -webkit-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(6) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(7) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(8) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(9) {
  -webkit-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(10) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(11) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(12) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(13) {
  -webkit-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(14) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(15) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(16) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(17) {
  -webkit-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out 0s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}

SCSS

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  height:100vh;
  @include flex-center;
}
.loader {
  @include flex-center;
  height: 40px;
  span {
    margin: 2px;
    display: block;
    background: #ff6800;
    width: 10px;
    border-radius: 10px;
  }
  @for $i from 1 through 17 {
    span:nth-child(#{$i}) {
      -webkit-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Safari 4+ */
      -moz-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Fx 5+ */
      -o-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Opera 12+ */
      animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* IE 10+, Fx 29+ */
    }
  }
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}

That's it.

You can check working demo here Codepen.

CSS only Spinner Loader

Raghav Bhardwaj — Fri, 22 Jul 2022 10:47:00 +0000

A simple CSS only loader. Just using span and css animation, work perfectly on all modern browsers.

HTML

<div class="mainLoaderContainer">
  <span class="loaderSpan span1"></span>
  <span class="loaderSpan span2"></span>
  <span class="loaderSpan span3"></span>
  <span class="loaderSpan span4"></span>
  <span class="loaderSpan span5"></span>
  <span class="loaderSpan span6"></span>
  <span class="loaderSpan span7"></span>
  <span class="loaderSpan span8"></span>
  <span class="loaderSpan span9"></span>
</div>

CSS

body {
  margin: 0;
}
.mainLoaderContainer {
  background-color:#000;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;  
}
.loaderSpan {
  position:absolute;
  border-radius:50%;
  animation: rotate 1.4s ease-in-out infinite;
}
.span1 {
  width:50px;
  height:50px;
  border:4px solid #d500f9;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 50ms;
}
.span2 {
  width:60px;
  height:60px;
  border:4px solid #e91e63;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 100ms;
}
.span3 {
  width:70px;
  height:70px;
  border:4px solid #26a69a;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 150ms;
}
.span4 {
  width:80px;
  height:80px;
  border:4px solid #cddc39;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 200ms;
}
.span5 {
  width:90px;
  height:90px;
  border:4px solid #7cb342;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 250ms;
}
.span6 {
  width:100px;
  height:100px;
  border:4px solid #ffa726;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 300ms;
}
.span7 {
  width:110px;
  height:110px;
  border:4px solid #ff8a65;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 350ms;
}
.span8 {
  width:120px;
  height:120px;
  border:4px solid #ef5350;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 400ms;
}
.span9 {
  width:130px;
  height:130px;
  border:4px solid #4a148c;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 450ms;
}
@keyframes rotate {
  0% {
    transform: rotate(-45deg);
  }
  90%, 100% {
     transform: rotate(315deg);
  }
}

That's it.

You can check working demo here Codepen.

Button Ripple Animation

Raghav Bhardwaj — Fri, 22 Jul 2022 10:38:00 +0000

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.