Buttons are a crucial part of any user interface, and adding a visually appealing effect can make your UI more engaging. In this tutorial, we will create a stunning glowing button using Tailwind CSS. The button will have a smooth glowing effect with multiple colors, creating a futuristic and eye-catching design.

TLDR; Entire code is available here: play.tailwindcss.com/ZBsGe7ttoA

You can also import this code block in the UiBun Visual Editor

Create a button layout

Let's make simple button first.

<div class="w-screen h-screen bg-[#121212] flex items-center justify-center " >
    <button class="px-2 py-3 rounded-md text-white text-lg cursor-pointer relative z-0 " >Hover me</button>
</div>

Here, we position the button relative and set z-index: 0 so that pseudo-elements (::before and ::after) can be positioned absolutely relative to it. This ensures proper alignment within the button.

Adding a glowing effect

To create a multicolor glow effect, we use the ::before pseudo-element. A linear-gradient as the background helps achieve the vibrant glow. The ::before element is slightly larger than the button to extend the glow beyond it, and a blur effect makes it appear soft and diffused. example:

<div class="w-screen h-screen bg-[#121212] flex items-center justify-center">
    <button class="px-6 py-3 rounded-md text-white text-lg cursor-pointer relative z-0
    before:content-[''] before:absolute before:z-[-1] before:w-[calc(100%+4px)] before:h-[calc(100%+4px)]
    before:top-[-2px] before:left-[-2px]
    before:bg-linear-[45deg,#FF0000,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,#FF0000]
    before:bg-[600%_auto]
    before:blur-md">
    Hover me</button>
</div>

At this stage, the glow overlaps the button text, reducing readability. To fix this, we add an ::after pseudo-element as a background layer inside the button.

<div class="w-screen h-screen bg-[#121212] flex items-center justify-center">
    <button class="px-6 py-3 rounded-md text-white text-lg cursor-pointer relative z-0
    before:content-[''] before:absolute before:z-[-1] before:w-[calc(100%+4px)] before:h-[calc(100%+4px)]
    before:top-[-2px] before:left-[-2px]
    before:bg-linear-[45deg,#FF0000,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,#FF0000]
    before:bg-[600%_auto]
    before:blur-md
    after:content-[''] after:absolute after:h-full after:w-full after:inset-0 after:z-[-1] after:bg-[#333] after:rounded-md">
    Hover me</button>
</div>

Now, the glow effect surrounds the button while maintaining text readability.

Animating the button glowing effect

To enhance the effect, we'll add an animation that shifts the gradient colors over time.

@keyframes glowing {
    0% { background-position: 0% 0%; }
    50% { background-position: 400% 0%; }
    100% { background-position: 0% 0%; }
}
.animate-glowing::before {
    animation: glowing 20s linear infinite;
}

Now add animate-glowing class to button.

<div class="w-screen h-screen bg-[#121212] flex items-center justify-center">
    <button class="px-6 py-3 rounded-md text-white text-lg cursor-pointer relative z-0
    before:content-[''] before:absolute before:z-[-1] before:w-[calc(100%+4px)] before:h-[calc(100%+4px)]
    before:top-[-2px] before:left-[-2px]
    before:bg-linear-[45deg,#FF0000,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,#FF0000]
    before:bg-[600%_auto]
    before:blur-md
    after:content-[''] after:absolute after:h-full after:w-full after:inset-0 after:z-[-1] after:bg-[#333] after:rounded-md
    animate-glowing">
    Hover me</button>
</div>

Adding a Hover Effect

To make the glow more dynamic, we'll initially set its opacity to 0 and reveal it on hover with a smooth transition.

<div class="w-screen h-screen bg-[#121212] flex items-center justify-center">
    <button class="px-6 py-3 rounded-md text-white text-lg cursor-pointer relative z-0
    before:content-[''] before:absolute before:z-[-1] before:w-[calc(100%+4px)] before:h-[calc(100%+4px)]
    before:top-[-2px] before:left-[-2px]
    before:bg-linear-[45deg,#FF0000,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,#FF0000]
    before:bg-[600%_auto]
    before:blur-md before:opacity-0 before:transition-opacity before:duration-200 before:ease-in-out
    hover:before:opacity-100
    after:content-[''] after:absolute after:h-full after:w-full after:inset-0 after:z-[-1] after:bg-[#333] after:rounded-md
    animate-glowing">
    Hover me</button>
</div>

Finally

Creating a multicolor glowing effect with Tailwind CSS is straightforward and adds a futuristic touch to your UI. We used pseudo-elements, gradients, blur effects, animations, and hover states to achieve this effect.

I hope you found this tutorial helpful! Subscribe to the UiBun newsletter to stay updated on new tutorials and product releases