JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">
<div class="redcarpet-buttons">
  <h1>Buttons</h1>
  <button class="btn-small">Share</button>
</div>

CSS

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

html {
  font-size: 10pt;
  line-height: 1.4;
  font-weight: 400;
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  color: #fff;
  margin: 0;
  background: #303030;
}

button {
  font-family: 'Source Sans Pro', sans-serif;
  border: none;
  cursor: pointer;
  color: white;
  padding: 0.8rem 2.5rem;
  border-radius: .25rem;
  font-size: 1.4rem;
  font-weight: 300;
  text-transform: uppercase;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
  background: #e32e2a;
}

button {
  transition: all 0s ease-in-out;
  position: relative;
  overflow: hidden;
}

button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: inherit;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

h1 {
  font-weight: 300;
}

.redcarpet-buttons {
  margin: 2rem;
}

JavaScript

var button = document.querySelector('button');
button.addEventListener('click', function(e) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  this.style.transformOrigin = ((1 - (x / this.offsetWidth)) * 100 >> 0) + '% ' + ((1 - (y / this.offsetHeight)) * 100 >> 0) + '%';
})