JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hexagon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="ripple"><path fill="currentColor" d="M441.5 39.8C432.9 25.1 417.1 16 400 16H176c-17.1 0-32.9 9.1-41.5 23.8l-112 192c-8.7 14.9-8.7 33.4 0 48.4l112 192c8.6 14.7 24.4 23.8 41.5 23.8h224c17.1 0 32.9-9.1 41.5-23.8l112-192c8.7-14.9 8.7-33.4 0-48.4l-112-192z" class=""></path></svg>

CSS

.ripple {
  background-position: center;
  transition: background 0.8s;
}
/* .ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
} */
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}