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