JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<div class="gradient-button">Click here</div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Lato:300");


.gradient-button {

  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;  
  background: linear-gradient(60deg,
		hsl(224, 85%, 66%),
		hsl(269, 85%, 66%),
		hsl(314, 85%, 66%),
		hsl(359, 85%, 66%),
		hsl(44, 85%, 66%),
		hsl(89, 85%, 66%),
		hsl(134, 85%, 66%),
		hsl(179, 85%, 66%));

/*   &::after {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
  	right: 0;
    bottom: 0;
    left: 0;
  	background-color: black;
  } */

  &:hover {
    animation: buttonGaridentAnim 4s alternate infinite;
  }

}

@keyframes buttonGaridentAnim {
  50% {
    background-position: 100% 50%;
  }
}