پیشنمایش زنده
کد HTML
<button
class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-[#7747FF] hover:bg-white hover:text-[#7747FF] focus:text-[#7747FF] focus:bg-gray-200 text-gray-50 font-bold leading-loose transition duration-200"
>
Submit
</button>
کد CSS
.inline-block {
display: inline-block;
}
.rounded-l-xl {
border-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
.rounded-t-xl {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.bg-\[\#7747FF\] {
--tw-bg-opacity: 1;
background-color: rgb(119 71 255 / var(--tw-bg-opacity));
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.font-bold {
font-weight: 700;
}
.leading-loose {
line-height: 2;
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.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-200 {
transition-duration: 200ms;
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:text-\[\#7747FF\]:hover {
--tw-text-opacity: 1;
color: rgb(119 71 255 / var(--tw-text-opacity));
}
.focus\:bg-gray-200:focus {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.focus\:text-\[\#7747FF\]:focus {
--tw-text-opacity: 1;
color: rgb(119 71 255 / var(--tw-text-opacity));
}