It is often said that design is in the details. On a website, there is no detail more critical than the button. It is the primary element of interaction. It’s the Call to Action (CTA). It’s the handshake between your user and your content.

Yet, when launching a blog, we often start with this:

<a href="/blog">Read the Blog</a>
<a href="[https://github.com](https://github.com)">GitHub</a>

Functional? Yes. Exciting? Not really. This is level zero of design: the blue underlined link (or purple if it has been visited).

Today, I’ll show you how I went from these sad links to modern, tactile, and responsive button components, using only modern CSS. No heavy frameworks, just good handcrafted code.

Step 1: The Structure (Anatomy)

A modern button is not just text. It is often an icon and text. To align all of this neatly, forget about hazardous floats or vertical-aligns. The industry standard is Flexbox.

Here is my basic HTML structure:

<a href="/blog" class="button primary">
    <svg width="20" height="20" ... >...</svg>
    Read the Blog
</a>

And the foundational CSS that changes everything:

.button {
    display: inline-flex;    /* The magic happens here */
    align-items: center;     /* Centers the icon and text vertically */
    justify-content: center;
    gap: 0.5rem;             /* Clean space between the icon and the text */
    
    padding: 0.75rem 1.5rem; /* "Chunky" buttons, easy to click */
    border-radius: 8px;      /* The current standard (neither square nor pill-shaped) */
    font-weight: 600;
    text-decoration: none;
    
    /* For future animation */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

Just with display: inline-flex and gap, you have solved 90% of your icon alignment problems.

Step 2: The Hierarchy (Primary vs Secondary)

Not all buttons are created equal. On my homepage, I want people to read my blog. Going to my LinkedIn is secondary.

If everything is flashing red, nothing is important. You have to create a visual hierarchy.

The “Primary” Button (Main Action)

It needs to “pop”. I use my accent color (defined in my CSS variables) and a slight drop shadow to give it depth.

.primary {
    background-color: var(--accent-color); /* My electric blue */
    color: white;
    box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39); /* A colored shadow, very modern */
}

The “Secondary” Button (Secondary Action)

It should be present, but discreet. Often a white or very light gray background with a subtle border.

.secondary {
    background-color: white;
    color: #333;
    border: 1px solid #e5e7eb;
}

Step 3: The “Feel” (Interaction)

This is what differentiates an amateur site from a pro site: the feedback. The user must feel that they can click.

On hover (:hover), I don’t just change the color. I make the button levitate slightly. It’s a micro-movement that makes the interface come alive.

.button:hover {
    transform: translateY(-2px); /* The button moves up by 2 pixels */
    filter: brightness(1.1);     /* It brightens slightly */
}

Note: The drop shadow defined earlier helps sell this levitation effect.

Step 4: The Mobile Trap (Responsive)

This is where things usually break. On a computer, my three buttons (“Blog”, “GitHub”, “LinkedIn”) fit on one line. On an iPhone, they get squished, the text wraps to the next line, it’s ugly.

The UX solution? Stack them.

On mobile, we don’t want small buttons side-by-side (hard to target with a thumb). We want wide clickable horizontal bands.

/* My button container */
.button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .button-group {
        flex-direction: column; /* We switch from row to column */
        width: 100%;
    }

    .button {
        width: 100%; /* The button takes up the full width */
        justify-content: center;
    }
}

Result

In a few lines of CSS, we went from a 90s hyperlink to a modern UI component:

  1. Flexible structure with Flexbox.
  2. Clear hierarchy with color variants.
  3. Satisfying feedback with hover animations.
  4. Optimized mobile experience.

The code isn’t complex, but it requires intention. That’s the secret of modern CSS: understanding that every pixel communicates something to the user.

Next step: Now that the buttons are beautiful, how do we organize the overall page structure? In the next article, we’ll talk about Astro’s architecture and why I had to shatter my monolithic Layout.