پیشنمایش زنده
کد HTML
<button
class="relative rounded-full bg-blue-500 px-4 py-2 font-mono font-bold text-white transition-colors duration-300 ease-linear before:absolute before:right-1/2 before:top-1/2 before:-z-[1] before:h-3/4 before:w-2/3 before:origin-bottom-left before:-translate-y-1/2 before:translate-x-1/2 before:animate-ping before:rounded-full before:bg-blue-500 hover:bg-blue-700 hover:before:bg-blue-700"
>
PULSATING BUTTON
</button>
کد CSS
.relative{position:relative}.rounded-full{border-radius:9999px}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-linear{transition-timing-function:linear}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:right-1\/2::before{content:var(--tw-content);right:50%}.before\:top-1\/2::before{content:var(--tw-content);top:50%}.before\:-z-\[1\]::before{content:var(--tw-content);z-index:-1}.before\:h-3\/4::before{content:var(--tw-content);height:75%}.before\:w-2\/3::before{content:var(--tw-content);width:66.666667%}.before\:origin-bottom-left::before{content:var(--tw-content);transform-origin:bottom left}.before\:-translate-y-1\/2::before{content:var(--tw-content);--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:translate-x-1\/2::before{content:var(--tw-content);--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%, 100%{content:var(--tw-content);transform:scale(2);opacity:0}}.before\:animate-ping::before{content:var(--tw-content);animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-blue-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:before\:bg-blue-700:hover::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}