Button by MuhammadHasann

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 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 1s 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 1s 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 1s 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.6s 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 ease;
79}
80
81button:hover {
82  background: transparent;
83  color: #fec195;
84  box-shadow: 0 0 25px #fec1958c;
85}
86
87button:hover .star-1 {
88  position: absolute;
89  top: -80%;
90  left: -30%;
91  width: 25px;
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: -25%;
100  left: 10%;
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: 55%;
110  left: 25%;
111  width: 5px;
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: 30%;
120  left: 80%;
121  width: 8px;
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: 25%;
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: 5%;
140  left: 60%;
141  width: 5px;
142  height: auto;
143  filter: drop-shadow(0 0 10px #fffdef);
144  z-index: 2;
145}
146
147.fil0 {
148  fill: #fffdef;
149}
150