Button by dalbrechtmartin

1button {
2  position: relative;
3  padding: 20px 35px;
4  background: #ffffff;
5  font-size: 20px;
6  font-weight: 600;
7  color: #000000;
8  box-shadow: 0px 0px 10px 0px rgb(255, 255, 255);
9  border-radius: 100px;
10  border: none;
11  transition: all 0.3s ease-in-out;
12  cursor: pointer;
13}
14
15.star-1 {
16  position: absolute;
17  top: 20%;
18  left: 20%;
19  width: 25px;
20  height: auto;
21  filter: drop-shadow(0 0 0 #fffdef);
22  z-index: -5;
23  transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96);
24}
25
26.star-2 {
27  position: absolute;
28  top: 45%;
29  left: 45%;
30  width: 15px;
31  height: auto;
32  filter: drop-shadow(0 0 0 #fffdef);
33  z-index: -5;
34  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
35}
36
37.star-3 {
38  position: absolute;
39  top: 40%;
40  left: 40%;
41  width: 5px;
42  height: auto;
43  filter: drop-shadow(0 0 0 #fffdef);
44  z-index: -5;
45  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
46}
47
48.star-4 {
49  position: absolute;
50  top: 20%;
51  left: 40%;
52  width: 8px;
53  height: auto;
54  filter: drop-shadow(0 0 0 #fffdef);
55  z-index: -5;
56  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
57}
58
59.star-5 {
60  position: absolute;
61  top: 25%;
62  left: 45%;
63  width: 15px;
64  height: auto;
65  filter: drop-shadow(0 0 0 #fffdef);
66  z-index: -5;
67  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
68}
69
70.star-6 {
71  position: absolute;
72  top: 5%;
73  left: 50%;
74  width: 5px;
75  height: auto;
76  filter: drop-shadow(0 0 0 #fffdef);
77  z-index: -5;
78  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
79}
80
81button:hover {
82  background: #000000;
83  color: #ffffff;
84  box-shadow: 0 0 80px #ffffff8c;
85}
86
87button:hover .star-1 {
88  position: absolute;
89  top: -20%;
90  left: -20%;
91  width: 20px;
92  height: auto;
93  filter: drop-shadow(0 0 10px #fffdef);
94  z-index: 2;
95}
96
97button:hover .star-2 {
98  position: absolute;
99  top: 35%;
100  left: -25%;
101  width: 15px;
102  height: auto;
103  filter: drop-shadow(0 0 10px #fffdef);
104  z-index: 2;
105}
106
107button:hover .star-3 {
108  position: absolute;
109  top: 80%;
110  left: -10%;
111  width: 10px;
112  height: auto;
113  filter: drop-shadow(0 0 10px #fffdef);
114  z-index: 2;
115}
116
117button:hover .star-4 {
118  position: absolute;
119  top: -25%;
120  left: 105%;
121  width: 20px;
122  height: auto;
123  filter: drop-shadow(0 0 10px #fffdef);
124  z-index: 2;
125}
126
127button:hover .star-5 {
128  position: absolute;
129  top: 30%;
130  left: 115%;
131  width: 15px;
132  height: auto;
133  filter: drop-shadow(0 0 10px #fffdef);
134  z-index: 2;
135}
136
137button:hover .star-6 {
138  position: absolute;
139  top: 80%;
140  left: 105%;
141  width: 10px;
142  height: auto;
143  filter: drop-shadow(0 0 10px #fffdef);
144  z-index: 2;
145}
146
147.fil0 {
148  fill: #fffdef;
149}
150