پیشنمایش زنده
کد HTML
<button class="button">
<span class="text">Star on GitHub</span>
<svg
aria-hidden="true"
fill="currentColor"
viewBox="0 0 47.94 47.94"
xmlns="http://www.w3.org/2000/svg"
width="20px"
height="20px"
class="icon"
>
<path
d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757
c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042
c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685
c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528
c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956
C22.602,0.567,25.338,0.567,26.285,2.486z"
></path>
</svg>
</button>
کد CSS
.button {
font-family: Inter, sans-serif;
cursor: pointer;
background: #000000;
color: #ffffff;
border: none;
padding: 12px 25px;
font-size: 16px;
font-weight: 700;
border-radius: 100px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.button:hover {
scale: 1.1;
}
.button:active {
scale: 1;
}
.button:hover .icon {
fill: #ffff00;
scale: 1.1;
rotate: 360deg;
filter: drop-shadow(0 0 5px rgba(255, 208, 0, 0.8))
drop-shadow(0 0 10px rgba(255, 208, 0, 0.6));
}
.button:hover .text {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2))
drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}
.text {
transition: all 1s ease;
}
.icon {
display: inline-block;
width: 18px;
height: 18px;
margin-top: -3px;
transition: all 1s ease;
}