پیشنمایش زنده
کد HTML
<button class="cursor-pointer">
<div
class="w-[83px] h-[83px] bg-blue-50 rounded-full relative shadow-[inset_0px_0px_1px_1px_rgba(0,0,0,0.3),_2px_3px_5px_rgba(0,0,0,0.1)] flex items-center justify-center"
>
<div
class="absolute w-[72px] h-[72px] z-10 bg-black rounded-full left-1/2 -translate-x-1/2 top-[5px] blur-[1px]"
></div>
<label
class="group cursor-pointer absolute w-[72px] h-[72px] bg-gradient-to-b from-blue-600 to-blue-400 rounded-full left-1/2 -translate-x-1/2 top-[5px] shadow-[inset_0px_4px_2px_#60a5fa,inset_0px_-4px_0px_#1e3a8a,0px_0px_2px_rgba(0,0,0,10)] active:shadow-[inset_0px_4px_2px_rgba(96,165,250,0.5),inset_0px_-4px_2px_rgba(37,99,235,0.5),0px_0px_2px_rgba(0,0,0,10)] z-20 flex items-center justify-center"
>
<div
class="w-8 group-active:w-[31px] fill-blue-100 drop-shadow-[0px_2px_2px_rgba(0,0,0,0.5)]"
>
<svg xmlns="http://www.w3.org/2000/svg" id="Filled" viewBox="0 0 24 24">
<path
d="M20.492,7.969,10.954.975A5,5,0,0,0,3,5.005V19a4.994,4.994,0,0,0,7.954,4.03l9.538-6.994a5,5,0,0,0,0-8.062Z"
></path>
</svg>
</div>
</label>
</div>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.top-\[5px\]{top:5px}.z-10{z-index:10}.z-20{z-index:20}.flex{display:flex}.h-\[72px\]{height:72px}.h-\[83px\]{height:83px}.w-8{width:2rem}.w-\[72px\]{width:72px}.w-\[83px\]{width:83px}.-translate-x-1\/2{--tw-translate-x:-50%;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))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#60a5fa var(--tw-gradient-to-position)}.fill-blue-100{fill:#dbeafe}.shadow-\[inset_0px_0px_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.3\)\2c _2px_3px_5px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]{--tw-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.3), 2px 3px 5px rgba(0,0,0,0.1);--tw-shadow-colored:inset 0px 0px 1px 1px var(--tw-shadow-color), 2px 3px 5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[inset_0px_4px_2px_\#60a5fa\2c inset_0px_-4px_0px_\#1e3a8a\2c 0px_0px_2px_rgba\(0\2c 0\2c 0\2c 10\)\]{--tw-shadow:inset 0px 4px 2px #60a5fa,inset 0px -4px 0px #1e3a8a,0px 0px 2px rgba(0,0,0,10);--tw-shadow-colored:inset 0px 4px 2px var(--tw-shadow-color), inset 0px -4px 0px var(--tw-shadow-color), 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)}.blur-\[1px\]{--tw-blur:blur(1px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0px_2px_2px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-drop-shadow:drop-shadow(0px 2px 2px rgba(0,0,0,0.5));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.active\:shadow-\[inset_0px_4px_2px_rgba\(96\2c 165\2c 250\2c 0\.5\)\2c inset_0px_-4px_2px_rgba\(37\2c 99\2c 235\2c 0\.5\)\2c 0px_0px_2px_rgba\(0\2c 0\2c 0\2c 10\)\]:active{--tw-shadow:inset 0px 4px 2px rgba(96,165,250,0.5),inset 0px -4px 2px rgba(37,99,235,0.5),0px 0px 2px rgba(0,0,0,10);--tw-shadow-colored:inset 0px 4px 2px var(--tw-shadow-color), inset 0px -4px 2px var(--tw-shadow-color), 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)}.group:active .group-active\:w-\[31px\]{width:31px}