پیشنمایش زنده
کد HTML
<button>
Button
<div class="star-1">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st1"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
<div class="star-2">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st2"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
<div class="star-3">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st1"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
<div class="star-4">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st1"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
<div class="star-5">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st2"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
<div class="star-6">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
>
<path
class="st1"
d="M54.7,6.1l9.6,24.6c0.7,1.8,2.4,3,4.4,3.1l26.7,1.4c4.6,0.2,6.4,6,2.8,8.8L77.5,60.4c-1.6,1.2-2.2,3.3-1.7,5.2
l6.9,25.3c1.2,4.4-3.6,7.9-7.4,5.5L52.6,81.9c-1.6-1-3.7-1-5.3,0L24.7,96.3c-3.8,2.4-8.6-1.1-7.4-5.5l6.9-25.2
c0.5-1.9-0.1-3.9-1.7-5.2L1.9,44c-3.6-2.8-1.7-8.6,2.8-8.8l26.7-1.3c1.9-0.1,3.7-1.3,4.4-3.1l9.7-24.6C47.1,1.9,53,1.9,54.7,6.1z"
></path>
</svg>
</div>
</button>
کد CSS
button {
position: relative;
padding: 12px 35px;
background: #ffdc00;
font-size: 17px;
font-weight: 900;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
color: #52288e;
border: none;
border-radius: 2.5rem;
box-shadow: 0 0 0 #ffef8c80;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.st1 {
fill: #ffdc00;
}
.st2 {
fill: #52288e;
}
.star-1 {
position: absolute;
top: 20%;
left: 20%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 0 #ffef8c);
z-index: -5;
transition: all 1.5s 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 #d6cbe4);
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 #ffef8c);
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 #ffef8c);
z-index: -5;
transition: all 0.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 #d6cbe4);
z-index: -5;
transition: all 0.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 #ffef8c);
z-index: -5;
transition: all 0.8s ease;
}
button:hover {
background: #d6b900;
box-shadow: 0 0 25px #ffef8c80;
}
button:hover .star-1 {
position: absolute;
top: -80%;
left: -30%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
transform: rotate(15deg);
}
button:hover .star-1 svg,
button:hover .star-2 svg,
button:hover .star-3 svg,
button:hover .star-4 svg,
button:hover .star-5 svg,
button:hover .star-6 svg {
opacity: 0;
transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1s;
}
button:hover .star-2 {
position: absolute;
top: -25%;
left: 10%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
transform: rotate(-20deg);
}
button:hover .star-3 {
position: absolute;
top: 55%;
left: 25%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
transform: rotate(50deg);
}
button:hover .star-4 {
position: absolute;
top: 30%;
left: 80%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-5 {
position: absolute;
top: 25%;
left: 115%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
transform: rotate(-25deg);
}
button:hover .star-6 {
position: absolute;
top: 5%;
left: 60%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
transform: rotate(60deg;);
}
.fil0 {
fill: #fffdef;
}