پیشنمایش زنده
کد HTML
<button class="btn">
<svg
class="sparkle"
id="Layer_1"
data-name="Layer 1"
viewBox="0 0 24 24"
fill="#FFFFFF"
width="24"
height="24"
>
<path
clip-rule="evenodd"
d="M12 14a3 3 0 0 1 3-3h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a3 3 0 0 1-3-3Zm3-1a1 1 0 1 0 0 2h4v-2h-4Z"
fill-rule="evenodd"
></path>
<path
clip-rule="evenodd"
d="M12.293 3.293a1 1 0 0 1 1.414 0L16.414 6h-2.828l-1.293-1.293a1 1 0 0 1 0-1.414ZM12.414 6 9.707 3.293a1 1 0 0 0-1.414 0L5.586 6h6.828ZM4.586 7l-.056.055A2 2 0 0 0 3 9v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2h-4a5 5 0 0 1 0-10h4a2 2 0 0 0-1.53-1.945L17.414 7H4.586Z"
fill-rule="evenodd"
></path>
</svg>
<span class="text">Connect</span>
</button>
کد CSS
.btn {
border: none;
width: 15em;
height: 5em;
border-radius: 3em;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
background: #1c1a1c;
cursor: pointer;
transition: all 450ms ease-in-out;
}
.sparkle {
fill: #aaaaaa;
transition: all 800ms ease;
}
.text {
font-weight: 600;
color: #aaaaaa;
font-size: medium;
}
.btn:hover {
background: linear-gradient(0deg, #6899fe, blue);
box-shadow:
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px 4px rgba(255, 255, 255, 0.2),
0px 0px 180px 0px #9917ff;
transform: translateY(-2px);
}
.btn:hover .text {
color: white;
}
.btn:hover .sparkle {
fill: white;
transform: scale(1.2);
}