پیشنمایش زنده
کد HTML
<button class="button">
<svg viewBox="0 0 448 512" class="svgIcon">
<path
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"
></path>
</svg>
</button>
کد CSS
.button {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(
to bottom right,
rgb(69, 120, 255),
rgb(255, 69, 69)
);
border: none;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
cursor: pointer;
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
overflow: hidden;
position: relative;
}
.svgIcon {
width: 12px;
transition: transform 0.3s ease-in-out;
}
.svgIcon path {
fill: white;
}
.button:hover {
width: 140px;
border-radius: 50px;
transform: scale(1.1);
color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
}
.button:hover .svgIcon {
width: 50px;
transform: translateY(60%);
}
.button::before {
position: absolute;
top: -20px;
content: "Delete";
color: white;
transition: font-size 0.3s ease-in-out, opacity 0.3s ease-in-out,
transform 0.3s ease-in-out, color 0.3s ease-in-out;
font-size: 2px;
}
.button:hover::before {
font-size: 13px;
opacity: 1;
transform: translateY(30px);
color: rgba(255, 255, 255, 0.9);
}