1.button {
2 position: relative;
3 height: 50px;
4 width: 130px;
5 border: none;
6 outline: none;
7 color: white;
8 background: #0f0f0f;
9 cursor: pointer;
10 border-radius: 4px;
11 font-size: 16px;
12 font-weight: 700;
13 font-family: 'Gruppo', sans-serif;
14 transition: all .2s ease-out;
15}
16
17.button:before {
18 position: absolute;
19 content: '';
20 top: -4px;
21 left: -4px;
22 height: calc(100% + 8px);
23 width: calc(100% + 8px);
24 border-radius: 6px;
25 z-index: -1;
26 opacity: 1;
27 background: linear-gradient(90deg, hsla(141, 54%, 86%, 1) 0%, hsla(333, 73%, 85%, 1) 25%, hsla(141, 54%, 86%, 1)50%);
28 background-size: 400%;
29 transition: opacity 1s ease-in-out;
30 animation: animate 20s linear infinite;
31}
32
33.button:hover {
34 transform: scale(1.1);
35 color: #0f0f0f;
36 opacity: 1;
37 transition: all .3s ease-in-out;
38}
39
40.button:active {
41 background: none;
42 color: #000000;
43 transform: scale(1);
44 transition: all .3s ease-in-out;
45}
46
47@keyframes animate {
48 0% {
49 background-position: 0 0;
50 }
51
52 50% {
53 background-position: 400% 0;
54 }
55
56 100% {
57 background-position: 0 0;
58 }
59}
60
