پیشنمایش زنده
کد HTML
<button
class="flex h-fit w-fit items-center justify-center gap-[0.5em] rounded-full bg-[#c60808] px-[2em] py-[1em] text-white shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000] duration-[250ms] hover:translate-y-[0.25em] active:translate-y-[0.5em] active:shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1]"
>
<svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="h-[1.5em] w-[1.5em]"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="1.5"></circle>
<path
d="M9 17C9.85038 16.3697 10.8846 16 12 16C13.1154 16 14.1496 16.3697 15 17"
stroke="#fff"
stroke-width="1.5"
stroke-linecap="round"
></path>
<ellipse cx="15" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
<ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
</g>
</svg>
<p class="[text-shadow:0px_1px_1px_0px_#950000]">Delete Account</p>
</button>
کد CSS
.flex{display:flex}.h-\[1\.5em\]{height:1.5em}.h-fit{height:-moz-fit-content;height:fit-content}.w-\[1\.5em\]{width:1.5em}.w-fit{width:-moz-fit-content;width:fit-content}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\[0\.5em\]{gap:0.5em}.rounded-full{border-radius:9999px}.bg-\[\#c60808\]{--tw-bg-opacity:1;background-color:rgb(198 8 8 / var(--tw-bg-opacity))}.px-\[2em\]{padding-left:2em;padding-right:2em}.py-\[1em\]{padding-top:1em;padding-bottom:1em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-\[inset_0px_-4px_4px_0px_\#f05b5b\2c 0px_0px_0px_2px_\#f9d1d1\2c 0px_4px_0px_0px_\#A60000\]{--tw-shadow:inset 0px -4px 4px 0px #f05b5b,0px 0px 0px 2px #f9d1d1,0px 4px 0px 0px #A60000;--tw-shadow-colored:inset 0px -4px 4px 0px var(--tw-shadow-color), 0px 0px 0px 2px var(--tw-shadow-color), 0px 4px 0px 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-\[250ms\]{transition-duration:250ms}.\[text-shadow\:0px_1px_1px_0px_\#950000\]{text-shadow:0px 1px 1px 0px #950000}.hover\:translate-y-\[0\.25em\]:hover{--tw-translate-y:0.25em;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-\[0\.5em\]:active{--tw-translate-y:0.5em;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_-4px_4px_0px_\#f05b5b\2c 0px_0px_0px_2px_\#f9d1d1\]:active{--tw-shadow:inset 0px -4px 4px 0px #f05b5b,0px 0px 0px 2px #f9d1d1;--tw-shadow-colored:inset 0px -4px 4px 0px var(--tw-shadow-color), 0px 0px 0px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}