پیشنمایش زنده
کد HTML
<button
class="cursor-pointer transistion-all duration-500 hover:shadow-[0_15px_50px_-15px_#13b6da] p-[12px] rounded-[24px] flex gap-4 bg-gradient-to-r from-[#2891c5] to-[#13b6da]"
>
<svg
class="h-12 w-12 bg-[#0a0a0a] shadow-xl rounded-full p-3"
viewBox="0 0 24 24"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.003 14H3.5v-4h11.502l-4.165-4.538 2.705-2.947 7.353 8.012c.747.813.747 2.133 0 2.947l-7.353 8.011-2.705-2.947L15.003 14z"
fill="#F0F0F0"
></path>
</svg>
<span class="text-[1.9rem] font-bold text-white pr-3">Play Now</span>
</button>
کد CSS
.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.cursor-pointer{cursor:pointer}.gap-4{gap:1rem}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.bg-\[\#0a0a0a\]{--tw-bg-opacity:1;background-color:rgb(10 10 10 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-\[\#2891c5\]{--tw-gradient-from:#2891c5 var(--tw-gradient-from-position);--tw-gradient-to:rgb(40 145 197 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#13b6da\]{--tw-gradient-to:#13b6da var(--tw-gradient-to-position)}.p-3{padding:0.75rem}.p-\[12px\]{padding:12px}.pr-3{padding-right:0.75rem}.text-\[1\.9rem\]{font-size:1.9rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-500{transition-duration:500ms}.hover\:shadow-\[0_15px_50px_-15px_\#13b6da\]:hover{--tw-shadow:0 15px 50px -15px #13b6da;--tw-shadow-colored:0 15px 50px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}