Button by SelfMadeSystem

1/* Yoinked from CodePen, but improved the animation
2so that it is smooth among other more minor things */
3
4.codepen-button {
5  display: block;
6  cursor: pointer;
7  color: white;
8  margin: 0 auto;
9  position: relative;
10  text-decoration: none;
11  font-weight: 600;
12  border-radius: 6px;
13  overflow: hidden;
14  padding: 3px;
15  isolation: isolate;
16}
17
18.codepen-button::before {
19  content: "";
20  position: absolute;
21  top: 0;
22  left: 0;
23  width: 400%;
24  height: 100%;
25  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
26  background-size: 25% 100%;
27  animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
28  animation-play-state: paused;
29  translate: -5% 0%;
30  transition: translate 0.25s ease-out;
31}
32
33.codepen-button:hover::before {
34  animation-play-state: running;
35  transition-duration: 0.75s;
36  translate: 0% 0%;
37}
38
39@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
40  to {
41    transform: translateX(-25%);
42  }
43}
44
45.codepen-button span {
46  position: relative;
47  display: block;
48  padding: 1rem 1.5rem;
49  font-size: 1.1rem;
50  background: #000;
51  border-radius: 3px;
52  height: 100%;
53}