VibeCoderzVibeCoderz
Telegram
All Prompts
Animated Glowing Border Button preview
buttonanimatedglowtailwindcssinteractivecta

Animated Glowing Border Button

Интерактивная кнопка CTA с анимированной радужной рамкой. Идеальна для лендингов, выделения действий. Tailwind CSS, CSS keyframes.

Prompt

<button class="glowing-border relative z-0 px-8 py-3 border-none outline-none text-white bg-gray-900 cursor-pointer rounded-xl select-none transition-opacity duration-300 ease-in-out hover:opacity-90 active:scale-95 font-medium" role="button">
    Glow Button
    <style>
    @keyframes glowing-button-85 {
        0% { background-position: 0 0; }
        50% { background-position: 400% 0; }
        100% { background-position: 0 0; }
    }
    .glowing-border::before {
        content: "";
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing-button-85 20s linear infinite;
        transition: opacity 0.3s ease-in-out;
        border-radius: 10px;
    }
    .glowing-border::after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #222;
        left: 0;
        top: 0;
        border-radius: 10px;
    }
</style>
</button>
All Prompts