1.btn {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  overflow: hidden;
7  padding: 1em 2em;
8  font-size: 15px;
9  font-weight: bold;
10  border-width: 0;
11  border-radius: 1.5em;
12  text-transform: uppercase;
13  transition: .2s ease;
14}
15
16.text {
17  font-size: 1.2em;
18  color: white;
19  z-index: 1;
20}
21
22.btn::before {
23  position: absolute;
24  content: '';
25  width: 120%;
26  height: 260%;
27  background-image: linear-gradient(135deg, rgba(0,5,255,1) 0%, rgba(255,0,159,1) 100%);
28}
29
30.btn::after {
31  position: absolute;
32  content: '';
33  width: 88%;
34  height: 80%;
35  border-width: 0;
36  border-radius: 1.2em;
37  background-color: black;
38  opacity: .7;
39  transition: 100ms ease;
40}
41
42.btn:hover.btn {
43  transform: scale(1.1);
44}
45
46.btn:hover.btn::after {
47  opacity: .5;
48}
49
50.btn:hover.btn::before {
51  animation: turn_4810 .4s infinite linear;
52}
53
54.btn:active.btn {
55  transform: scale(1.05);
56}
57
58.btn:active.btn::before {
59  transform: scale(1.05);
60  animation: turn_4810 .2s infinite linear;
61}
62
63@keyframes turn_4810 {
64  0% {
65    transform: rotate(0deg);
66  }
67
68  100% {
69    transform: rotate(360deg);
70  }
71}
72
73