All Prompts
All Prompts

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>