پیشنمایش زنده
کد HTML
<button
class="cursor-pointer text-zinc-200 flex gap-2 items-center bg-blue-600 px-4 py-2 rounded-lg font-medium text-sm hover:bg-blue-700 transition-all ease-in duration-200"
>
<svg
class="w-6 fill-zinc-200"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
>
<path
d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z"
></path>
</svg>
Login with Facebook
</button>
کد CSS
.flex{display:flex}.w-6{width:1.5rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.fill-zinc-200{fill:#e4e4e7}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}