پیشنمایش زنده
کد HTML
<button
class="bg-white text-center w-48 rounded-2xl h-14 relative text-black text-xl font-semibold group"
type="button"
>
<div
class="bg-green-400 rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
height="25px"
width="25px"
>
<path
d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
fill="#000000"
></path>
<path
d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
fill="#000000"
></path>
</svg>
</div>
<p class="translate-x-2">Go Back</p>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.left-1{left:0.25rem}.top-\[4px\]{top:4px}.z-10{z-index:10}.flex{display:flex}.h-12{height:3rem}.h-14{height:3.5rem}.w-1\/4{width:25%}.w-48{width:12rem}.translate-x-2{--tw-translate-x:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.duration-500{transition-duration:500ms}.group:hover .group-hover\:w-\[184px\]{width:184px}