پیشنمایش زنده
کد HTML
<button
class="group flex h-fit w-fit flex-col items-center justify-center rounded-full bg-[#F1ddcf] px-[2em] py-[0.5em] shadow-[inset_0px_2px_4px_0px_#f9f1eb,inset_0px_-2px_4px_0px_#e8c8b0,0px_-2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb] duration-200 hover:translate-y-[5%] active:translate-y-[7%] active:shadow-[inset_0px_-2px_4px_0px_#f9f1eb,inset_0px_2px_4px_0px_#e8c8b0,0px_2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb]"
>
<p
class="font-nunito text-[1.5em] font-semibold text-[#d19466] duration-200 group-active:translate-y-[5%]"
>
Button
</p>
</button>
کد CSS
.flex{display:flex}.h-fit{height:-moz-fit-content;height:fit-content}.w-fit{width:-moz-fit-content;width:fit-content}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-\[\#F1ddcf\]{--tw-bg-opacity:1;background-color:rgb(241 221 207 / var(--tw-bg-opacity))}.px-\[2em\]{padding-left:2em;padding-right:2em}.py-\[0\.5em\]{padding-top:0.5em;padding-bottom:0.5em}.text-\[1\.5em\]{font-size:1.5em}.font-semibold{font-weight:600}.text-\[\#d19466\]{--tw-text-opacity:1;color:rgb(209 148 102 / var(--tw-text-opacity))}.shadow-\[inset_0px_2px_4px_0px_\#f9f1eb\2c inset_0px_-2px_4px_0px_\#e8c8b0\2c 0px_-2px_16px_0px_\#e8c8b0\2c 0px_2px_16px_0px_\#f9f1eb\]{--tw-shadow:inset 0px 2px 4px 0px #f9f1eb,inset 0px -2px 4px 0px #e8c8b0,0px -2px 16px 0px #e8c8b0,0px 2px 16px 0px #f9f1eb;--tw-shadow-colored:inset 0px 2px 4px 0px var(--tw-shadow-color), inset 0px -2px 4px 0px var(--tw-shadow-color), 0px -2px 16px 0px var(--tw-shadow-color), 0px 2px 16px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-200{transition-duration:200ms}.hover\:translate-y-\[5\%\]:hover{--tw-translate-y:5%;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))}.active\:translate-y-\[7\%\]:active{--tw-translate-y:7%;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))}.active\:shadow-\[inset_0px_-2px_4px_0px_\#f9f1eb\2c inset_0px_2px_4px_0px_\#e8c8b0\2c 0px_2px_16px_0px_\#e8c8b0\2c 0px_2px_16px_0px_\#f9f1eb\]:active{--tw-shadow:inset 0px -2px 4px 0px #f9f1eb,inset 0px 2px 4px 0px #e8c8b0,0px 2px 16px 0px #e8c8b0,0px 2px 16px 0px #f9f1eb;--tw-shadow-colored:inset 0px -2px 4px 0px var(--tw-shadow-color), inset 0px 2px 4px 0px var(--tw-shadow-color), 0px 2px 16px 0px var(--tw-shadow-color), 0px 2px 16px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:active .group-active\:translate-y-\[5\%\]{--tw-translate-y:5%;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))}