پیشنمایش زنده
کد HTML
<button class="button">
Button
<div class="Container_particles_plus">
<span class="particles_plus">
<svg
viewBox="0 0 16 16"
class="bi bi-plus"
fill="rgb(206, 255, 73)"
height="28"
width="28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 1a.5.5 0 0 1 .5.5V7h5.5a.5.5 0 0 1 0 1H8v5.5a.5.5 0 0 1-1 0V8H1.5a.5.5 0 0 1 0-1H7V1.5A.5.5 0 0 1 8 1z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="particles_plus">
<svg
viewBox="0 0 16 16"
class="bi bi-plus"
fill="rgb(206, 255, 73)"
height="18"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 1a.5.5 0 0 1 .5.5V7h5.5a.5.5 0 0 1 0 1H8v5.5a.5.5 0 0 1-1 0V8H1.5a.5.5 0 0 1 0-1H7V1.5A.5.5 0 0 1 8 1z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="particles_plus">
<svg
viewBox="0 0 16 16"
class="bi bi-plus"
fill="rgb(206, 255, 73)"
height="16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 1a.5.5 0 0 1 .5.5V7h5.5a.5.5 0 0 1 0 1H8v5.5a.5.5 0 0 1-1 0V8H1.5a.5.5 0 0 1 0-1H7V1.5A.5.5 0 0 1 8 1z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="particles_plus">
<svg
viewBox="0 0 16 16"
class="bi bi-plus"
fill="rgb(206, 255, 73)"
height="34"
width="34"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 1a.5.5 0 0 1 .5.5V7h5.5a.5.5 0 0 1 0 1H8v5.5a.5.5 0 0 1-1 0V8H1.5a.5.5 0 0 1 0-1H7V1.5A.5.5 0 0 1 8 1z"
fill-rule="evenodd"
></path>
</svg>
</span>
</div>
</button>
کد CSS
.button {
cursor: pointer;
width: 150px;
padding: 10px 5px 10px 5px;
border-radius: 1000px;
font-weight: bolder;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: 25px;
box-shadow: inset 0px -9px 15px rgba(0, 0, 0, 0.693);
line-height: 40px;
background-color: #212121;
color: rgb(121, 121, 121);
border-top: none;
border-left: none;
border-right: none;
border-bottom: rgba(71, 71, 71, 0.452) 1px solid;
position: relative;
transition: background-image 0.3s ease;
}
.button::before {
z-index: -1;
position: absolute;
top: 0;
left: 0;
content: "";
width: 150px;
height: 60px;
border-radius: 1000px;
box-shadow: 3px 10px 10px rgba(0, 0, 0, 0.452);
}
.button:focus:not(:active) {
transition: color 0.3s ease-in-out;
color: greenyellow;
text-shadow: 0 0 13px rgba(172, 255, 47, 0.329);
box-shadow: inset 0px -5px 10px rgba(0, 0, 0, 0.5);
}
.button:focus:not(:active) {
animation: clickButton 0.76s
linear(
0,
0.234 11.8%,
0.403 18.4%,
0.624 24.7%,
0.999 33.3%,
0.76 39.9%,
0.705 42.6%,
0.687 45.2%,
0.703 47.7%,
0.753 50.3%,
0.999 57.7%,
0.89 61.8%,
0.865 63.6%,
0.857 65.3%,
0.865 67%,
0.887 68.8%,
0.999 74.5%,
0.957 77.5%,
0.944 80.2%,
0.954 82.7%,
1 88.2%,
0.988 91.9%,
1
);
}
.Container_particles_plus {
display: flex;
justify-content: space-between;
width: 70%;
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
}
.particles_plus {
filter: drop-shadow(0 0 13px rgba(172, 255, 47, 0.849));
}
.particles_plus:nth-child(1) {
display: none;
opacity: 0;
animation: particles_plus 0.9s linear;
}
.particles_plus:nth-child(2) {
display: none;
opacity: 0;
animation: particles_plus 0.9s 0.4s linear;
}
.particles_plus:nth-child(3) {
display: none;
opacity: 0;
animation: particles_plus 0.9s 0.1s linear;
}
.particles_plus:nth-child(4) {
display: none;
opacity: 0;
animation: particles_plus 0.9s 0.2s linear;
}
.button:focus:not(:active) .particles_plus {
display: block;
}
.button:active:not(:focus) .particles_plus {
display: block;
}
@keyframes particles_plus {
0% {
opacity: 0;
transform: translate(50%);
}
50% {
opacity: 1;
transform: translate(50%, -50%);
}
90%,
100% {
opacity: 0;
transform: translate(50%, -100%);
}
}
@keyframes clickButton {
0% {
scale: 1;
}
50% {
scale: 0.9;
}
100% {
scale: 1;
}
}