پیش‌نمایش زنده
کد HTML
<button class="w-40 h-12 bg-white cursor-pointer rounded-3xl border-2 border-[#9748FF] shadow-[inset_0px_-2px_0px_1px_#9748FF] group hover:bg-[#9748FF] transition duration-300 ease-in-out">
 <span class="font-medium text-[#333] group-hover:text-white">Hover me</span>
</button>
کد CSS
.h-12{height:3rem}.w-40{width:10rem}.cursor-pointer{cursor:pointer}.rounded-3xl{border-radius:1.5rem}.border-2{border-width:2px}.border-\[\#9748FF\]{--tw-border-opacity:1;border-color:rgb(151 72 255 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.font-medium{font-weight:500}.text-\[\#333\]{--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity))}.shadow-\[inset_0px_-2px_0px_1px_\#9748FF\]{--tw-shadow:inset 0px -2px 0px 1px #9748FF;--tw-shadow-colored:inset 0px -2px 0px 1px 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{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:bg-\[\#9748FF\]:hover{--tw-bg-opacity:1;background-color:rgb(151 72 255 / var(--tw-bg-opacity))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05