پیشنمایش زنده
کد HTML
<button class="hover:brightness-110 hover:animate-pulse font-bold py-3 px-6 rounded-full bg-gradient-to-r from-blue-500 to-pink-500 text-white">Click on me</button>
کد CSS
.rounded-full {
border-radius: 9999px
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.to-pink-500 {
--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem
}
.font-bold {
font-weight: 700
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
@keyframes pulse {
50% {
opacity: .5
}
}
.hover\:animate-pulse:hover {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.hover\:brightness-110:hover {
--tw-brightness: brightness(1.1);
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)
}