پیشنمایش زنده
کد HTML
<button class="button">
<svg
class="w-6 h-6"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<div class="text">Button</div>
</button>
کد CSS
.button {
background-color: #ffffff00;
color: #fff;
width: 8.5em;
height: 2.9em;
border: #3cc 0.2em solid;
border-radius: 11px;
text-align: right;
transition: all 0.6s ease;
}
.button:hover {
background-color: #3cc;
cursor: pointer;
}
.button svg {
width: 1.6em;
margin: -0.2em 0.8em 1em;
position: absolute;
display: flex;
transition: all 0.6s ease;
}
.button:hover svg {
transform: translateX(5px);
}
.text {
margin: 0 1.5em;
}