JSFiddle - React, Tailwind, and code Playground

HTML

<button>RIPPLE BUTTON</button>

CSS

button {
	display: inline-block;
	padding: 6px 12px;
	margin: 2px;
	line-height: 30px;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-moz-border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	text-decoration: none;
	font-family: Roboto,sans-serif;
	font-size: 12px;
	color: #000;
	text-shadow: 0 1px 0 rgba(255,255,255,0.09);
	text-decoration: none !important;
	cursor: pointer;
	outline: none;
	background-color: #D2D2D2;
	border-color: #D2D2D2;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #D2D2D2),
		color-stop(0.5, #E4E4E4),
		color-stop(0.5, #EDEDED),
		color-stop(1, #FFFFFF)
	);
	background-image: -webkit-linear-gradient(
		center top,
		#D2D2D2 0%,
		#E4E4E4 50%,
		#EDEDED 50%,
		#FFFFFF 100%
	);
	background-image: -moz-linear-gradient(
		center top,
		#D2D2D2 0%,
		#E4E4E4 50%,
		#EDEDED 50%,
		#FFFFFF 100%
	);
	background-image: -o-linear-gradient(
		center top,
		#D2D2D2 0%,
		#E4E4E4 50%,
		#EDEDED 50%,
		#FFFFFF 100%
	);
	background-image: -ms-linear-gradient(
		center top,
		#D2D2D2 0%,
		#E4E4E4 50%,
		#EDEDED 50%,
		#FFFFFF 100%
	);
	background-image: linear-gradient(
		to top,
		#D2D2D2 0%,
		#E4E4E4 50%,
		#EDEDED 50%,
		#FFFFFF 100%
	);	
}
button:hover {
	background-color: #4488ee;
	border-color: #4488ee;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #4488ee),
		color-stop(0.5, #5590ee),
		color-stop(0.5, #77a2ff),
		color-stop(1, #88aaff)
		);
	background-image: -webkit-linear-gradient(
		center top,
		#4488ee 0%,
		#5590ee 50%,
		#77a2ff 50%,
		#88aaff 100%
		);
	background-image: -moz-linear-gradient(
		center top,
		#4488ee 0%,
		#5590ee 50%,
		#77a2ff 50%,
		#88aaff 100%
		);
	background-image: -o-linear-gradient(
		center top,
		#4488ee 0%,
		#5590ee 50%,
		#77a2ff 50%,
		#88aaff 100%
		);
	background-image: -ms-linear-gradient(
		center top,
		#4488ee 0%,
		#5590ee 50%,
		#77a2ff 50%,
		#88aaff...

JavaScript

/*!
 * jQuery Color Animations v@VERSION
 * https://github.com/jquery/jquery-color
 *
 * Copyright 2013 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * Date: @DATE
 */
(function( jQuery, undefined ) {

	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",

	// plusequals test for += 100 -= 100
	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
	// a set of RE's that can match strings and generate color tuples.
	stringParsers = [{
			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
			parse: function( execResult ) {
				return [
					execResult[ 1 ],
					execResult[ 2 ],
					execResult[ 3 ],
					execResult[ 4 ]
				];
			}
		}, {
			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
			parse: function( execResult ) {
				return [
					execResult[ 1 ] * 2.55,
					execResult[ 2 ] * 2.55,
					execResult[ 3 ] * 2.55,
					execResult[ 4 ]
				];
			}
		}, {
			// this regex ignores A-F because it's compared against an already lowercased string
			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
			parse: function( execResult ) {
				return [
					parseInt( execResult[ 1 ], 16 ),
					parseInt( execResult[ 2 ], 16 ),
					parseInt( execResult[ 3 ], 16 )
				];
			}
		}, {
			// this regex ignores A-F because it's compared against an already lowercased string
			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
			parse: function( execResult ) {
				return [
					parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
					parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
					parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
				];
			}
		}, {
			re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
			space: "hsla",
			parse: function( execResult...