1.Btn {
2  position: relative;
3  width: 180px;
4  height: 50px;
5  border: none;
6  background-color: #005f99;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  overflow: hidden;
11  border-radius: 30px;
12  cursor: pointer;
13  box-shadow: 8px 8px 0px rgb(12, 12, 12);
14  transition-duration: .3s;
15}
16
17.Layer {
18  width: 60px;
19  position: absolute;
20  left: -30px;
21  transition-duration: .3s;
22  animation: spin 5s  linear infinite;
23}
24
25.Btn:hover {
26  transform: translateY(5px);
27  box-shadow: 3px 3px 0px black;
28  transition-duration: .3s;
29}
30
31@keyframes spin {
32  from {
33    transform: rotate(0deg);
34  }
35
36  to {
37    transform: rotate(360deg);
38  }
39}
40
41.Btn:hover .Layer {
42  left: 0%;
43  width: 100%;
44  transition-duration: .3s;
45}
46
47.text {
48  color: white;
49  font-weight: 600;
50  font-size: 1.1em;
51  position: absolute;
52  z-index: 2;
53  transition-duration: .1s;
54  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
55}
56
57.Btn:hover .text {
58  color: transparent;
59  transition-duration: .3s;
60}
61/* svg colors */
62.cls-1 {
63  fill: #242021;
64}
65
66.cls-2 {
67  fill: #e82728;
68}
69
70.cls-3 {
71  fill: #fefefe;
72}
73
74.cls-4 {
75  fill: #e92728;
76}
77
78.cls-5 {
79  fill: #005f99;
80}
81
82.cls-6 {
83  fill: #fff;
84}
85/* svg colors */