Button by umerhassaan

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: 60;
12  border-radius: 100px;
13  overflow: hidden;
14  padding: 2px;
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, #d1d1d1, #02367b, #a7bfde);
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
28    0.75s linear infinite;
29  animation-play-state: running;
30  translate: -5% 0%;
31  transition: translate 0.25s ease-out;
32}
33
34.codepen-button:hover::before {
35  animation-play-state: running;
36  transition-duration: 0.75s;
37  translate: 0% 0%;
38}
39
40@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 {
41  to {
42    transform: translateX(-25%);
43  }
44}
45
46.codepen-button span {
47  position: relative;
48  display: block;
49  padding: 1rem 1.5rem;
50  font-size: 1.1rem;
51  background: #02367b;
52  border-radius: 100px;
53  height: 100%;
54}
55