پیشنمایش زنده
کد HTML
<button class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded-full animate-pulse">
Pulse Animation
</button>
کد CSS
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.rounded-full {
border-radius: 9999px
}
.bg-pink-500 {
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity))
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.font-bold {
font-weight: 700
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:bg-pink-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(190 24 93 / var(--tw-bg-opacity))
}