پیشنمایش زنده
کد HTML
<button class="cursor-pointer bg-gradient-to-r from-[#EB3349] to-[#F45C43] px-6 py-2 rounded text-white font-semibold shadow-[rgba(6,_24,_44,_0.4)_0px_0px_0px_2px,_rgba(6,_24,_44,_0.65)_0px_4px_6px_-1px,_rgba(255,_255,_255,_0.08)_0px_1px_0px_inset] hover:shadow-[rgba(6,_24,_44,_0.4)_0px_0px_0px_2px,_rgba(6,_24,_44,_0.65)_0px_4px_6px_-10px,_rgba(255,_255,_255,_0.08)_0px_1px_0px_inset] focus:shadow-[inset_-12px_-8px_40px_#46464620] transition-shadow">
Button
</button>
کد CSS
.cursor-pointer{cursor:pointer}.rounded{border-radius:0.25rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-\[\#EB3349\]{--tw-gradient-from:#EB3349 var(--tw-gradient-from-position);--tw-gradient-to:rgb(235 51 73 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#F45C43\]{--tw-gradient-to:#F45C43 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-\[rgba\(6\2c _24\2c _44\2c _0\.4\)_0px_0px_0px_2px\2c _rgba\(6\2c _24\2c _44\2c _0\.65\)_0px_4px_6px_-1px\2c _rgba\(255\2c _255\2c _255\2c _0\.08\)_0px_1px_0px_inset\]{--tw-shadow:rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color), 0px 4px 6px -1px var(--tw-shadow-color), inset 0px 1px 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)}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:shadow-\[rgba\(6\2c _24\2c _44\2c _0\.4\)_0px_0px_0px_2px\2c _rgba\(6\2c _24\2c _44\2c _0\.65\)_0px_4px_6px_-10px\2c _rgba\(255\2c _255\2c _255\2c _0\.08\)_0px_1px_0px_inset\]:hover{--tw-shadow:rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -10px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color), 0px 4px 6px -10px var(--tw-shadow-color), inset 0px 1px 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)}.focus\:shadow-\[inset_-12px_-8px_40px_\#46464620\]:focus{--tw-shadow:inset -12px -8px 40px #46464620;--tw-shadow-colored:inset -12px -8px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}