Button by Peary74

Made by

@Peary74

Theme:

Dark

#button

#212121

191 views

CSSAdd prefixes

1button {
2  background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%);
3  box-shadow: 6px 0px 0px #00e6f6;
4  position: relative;
5  padding: 12px 35px;
6  font-size: 20px;
7  font-weight: 500;
8  color: white;
9  border: 3px solid #00e6f6;
10  border-radius: 8px;
11  box-shadow: 0 0 0 #fec1958c;
12  transition: all .3s ease-in-out;
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 #fd1853);
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 #fd1853);
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 #fd1853);
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 #fd1853);
55  z-index: -5;
56  transition: all .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 #fd1853);
66  z-index: -5;
67  transition: all .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 #fd1853);
77  z-index: -5;
78  transition: all .8s ease;
79}
80
81button:hover {
82  background: transparent;
83  color: #00e6f6;
84  box-shadow: 0 0 50px #fd1853;
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 #fd1853);
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 #fd1853);
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 #fd1853);
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 #fd1853);
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 #fd1853);
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 #fd1853);
144  z-index: 2;
145}
146
147.fil0 {
148  fill: #fd1853
149}

button {
  background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%);
  box-shadow: 6px 0px 0px #00e6f6;
  position: relative;
  padding: 12px 35px;
  font-size: 20px;
  font-weight: 500;
  color: white;
  border: 3px solid #00e6f6;
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all .3s ease-in-out;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s ease;
}

button:hover {
  background: transparent;
  color: #00e6f6;
  box-shadow: 0 0 50px #fd1853;
}

button:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

.fil0 {
  fill: #fd1853
}

HTML

1<button>Hover me
2  <div class="star-1">
3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25">
4  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
5    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
6    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
7    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
8</svg>
9
10
11  </div>
12  <div class="star-2">
13    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
14  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
15    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
16    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
17    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
18</svg>
19
20  </div>
21  <div class="star-3">
22    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="9" height="9">
23  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
24    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
25    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
26    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
27</svg>
28
29  </div>
30  <div class="star-4">
31    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10">
32  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
33    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
34    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
35    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
36</svg>
37
38  </div>
39  <div class="star-5">
40    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
41  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
42    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
43    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
44    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
45</svg>
46
47  </div>
48  <div class="star-6">
49    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="7" height="7">
50  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
51    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
52    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
53    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
54</svg>
55
56  </div>
57</button>
58
59
60

<button>Hover me
  <div class="star-1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>


  </div>
  <div class="star-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="9" height="9">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-6">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="7" height="7">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
</button>