Button by Peary74

1button {
2  position: relative;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  border-radius: 5px;
7  background: #fd1853;
8  font-family: "Montserrat", sans-serif;
9  overflow: hidden;
10  border: none;
11}
12
13button:after {
14  content: " ";
15  width: 0%;
16  height: 100%;
17  background: #fff;
18  position: absolute;
19  transition: all 0.4s ease-in-out;
20  right: 0;
21}
22
23button:hover::after {
24  right: auto;
25  left: 0;
26  width: 100%;
27}
28
29button span {
30  text-align: center;
31  text-decoration: none;
32  width: 100%;
33  padding: 18px 25px;
34  color: #fffcfd;
35  font-size: 1.125em;
36  font-weight: 700;
37  letter-spacing: 0.3em;
38  z-index: 20;
39  transition: all 0.3s ease-in-out;
40}
41
42button:hover span {
43  animation: scaleUp 0.3s ease-in-out;
44  color: #fd1853;
45}
46
47button:hover {
48  animation: scaleUp 0.3s ease-in-out;
49}
50
51@keyframes scaleUp {
52  0% {
53    transform: scale(1);
54  }
55
56  50% {
57    transform: scale(0.95);
58  }
59
60  100% {
61    transform: scale(1);
62  }
63}
64
65.star-1 {
66  position: absolute;
67  top: 20%;
68  left: 20%;
69  width: 25px;
70  height: auto;
71  filter: drop-shadow(0 0 0 #fd1853);
72  z-index: -5;
73  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
74}
75
76.star-2 {
77  position: absolute;
78  top: 45%;
79  left: 45%;
80  width: 15px;
81  height: auto;
82  filter: drop-shadow(0 0 0 #fd1853);
83  z-index: -5;
84  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
85}
86
87.star-3 {
88  position: absolute;
89  top: 40%;
90  left: 40%;
91  width: 5px;
92  height: auto;
93  filter: drop-shadow(0 0 0 #fd1853);
94  z-index: -5;
95  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
96}
97
98.star-4 {
99  position: absolute;
100  top: 20%;
101  left: 40%;
102  width: 8px;
103  height: auto;
104  filter: drop-shadow(0 0 0 #fd1853);
105  z-index: -5;
106  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
107}
108
109.star-5 {
110  position: absolute;
111  top: 25%;
112  left: 45%;
113  width: 15px;
114  height: auto;
115  filter: drop-shadow(0 0 0 #fd1853);
116  z-index: -5;
117  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
118}
119
120.star-6 {
121  position: absolute;
122  top: 5%;
123  left: 50%;
124  width: 5px;
125  height: auto;
126  filter: drop-shadow(0 0 0 #fd1853);
127  z-index: -5;
128  transition: all .8s ease;
129}
130
131button:hover .star-1 {
132  position: absolute;
133  top: -2%;
134  left: 0%;
135  width: 25px;
136  height: auto;
137  filter: drop-shadow(0 0 10px #fd1853);
138  z-index: 2;
139}
140
141button:hover .star-2 {
142  position: absolute;
143  top: 34%;
144  left: 41.5%;
145  width: 15px;
146  height: auto;
147  filter: drop-shadow(0 0 10px #fd1853);
148  z-index: 2;
149}
150
151button:hover .star-3 {
152  position: absolute;
153  top: 55%;
154  left: 25%;
155  width: 5px;
156  height: auto;
157  filter: drop-shadow(0 0 10px #fd1853);
158  z-index: 2;
159}
160
161button:hover .star-4 {
162  position: absolute;
163  top: 0%;
164  left: 55%;
165  width: 8px;
166  height: auto;
167  filter: drop-shadow(0 0 10px #fd1853);
168  z-index: 2;
169}
170
171button:hover .star-5 {
172  position: absolute;
173  top: 25%;
174  left: 85%;
175  width: 15px;
176  height: auto;
177  filter: drop-shadow(0 0 10px #fd1853);
178  z-index: 2;
179}
180
181button:hover .star-6 {
182  position: absolute;
183  top: 75%;
184  left: 60%;
185  width: 5px;
186  height: auto;
187  filter: drop-shadow(0 0 10px #fd1853);
188  z-index: 2;
189}
190
191