JSFiddle - React, Tailwind, and code Playground

by Optimix

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0.00" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>
<a href="#" class="button">Click me</a>

CSS

.button {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  background-color: #222; /* dark blue */
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 100;
  text-decoration: none;
  user-select: none;
  letter-spacing: 1px;
  color: white;
  padding: 20px 40px;
  text-transform: uppercase;
  Transition: background-color 0.1s ease-out;
  -webkit-filter: url("#filter");
  filter: url("#filter");
}

.button:hover {
  background-color: #2CD892; /* green */
}


/* demo related */
.svg-filters {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

html, body {
  height: 100%;
  border: none;
}
a {
  outline: none;
}
body {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}

JavaScript

var turb = document.querySelectorAll('#filter feTurbulence')[0];
var params = {
	baseFrequencyX: 0.001,
	baseFrequencyY: 0.001
}
var gui = new dat.GUI();
gui.add(params, 'baseFrequencyX').min(0.000).max(0.2).step(0.001).onChange(update);
gui.add(params, 'baseFrequencyY').min(0.000).max(0.2).step(0.001).onChange(update);

function update() {
	turb.setAttribute('baseFrequency', params.baseFrequencyX + ' ' + params.baseFrequencyY);
}