How to create a button with a scaling container

Concept Overview

The effect is achieved by layering a pseudo-element (::before) beneath the button’s content. This pseudo-element acts as a decorative container, scaling and transitioning on hover or click for a dynamic, interactive experience.

Step 1: Structure the Button

Start with a basic button element and apply necessary styling:

<button class="px-4 h-9 rounded-full relative">
    <span class="relative text-white">Click Me</span>
</button>

The span inside the button is styled with relative to ensure it appears above the container. This prevents the before pseudo-element from overlapping the button text.

Step 2: Add the Scaling Container

Use the before: pseudo-element to add the scaling container around the button:

<button class="px-4 h-9 rounded-full relative before:absolute before:inset-0 before:rounded-full before:border before:border-indigo-700 before:bg-indigo-600 before:shadow-md before:shadow-indigo-950/25 before:duration-300 hover:before:brightness-90 active:before:scale-95">
    <span class="relative text-white">Click Me</span>
</button>

Key Additions:

Container styling:

• before:absolute before:inset-0: Positions the container to cover the button entirely.
• before:rounded-full: Ensures the container matches the button’s shape.
• before:border before:border-indigo-700: Adds a border to the container.
• before:bg-indigo-600: Sets the background color of the container.
• before:shadow-sm before:shadow-indigo-950/15: Applies a soft shadow for depth.

Hover and active effects:

• before:duration-300: Smooths out transitions.
• hover:before:brightness-75: Dims the container slightly on hover for feedback.
• active:before:scale-95: Scales the container down slightly when the button is clicked.

Final Notes

• Replace bg-indigo-600 and border-indigo-700 with colors that fit your design.
• Adjust the shadow and brightness utilities to modify the hover and active states for a custom look.
• Use duration-300 to control the animation speed.

This button design is visually appealing and works well for interactive elements like calls-to-action