Styling Links as Buttons with CSS

Sometimes you need a link to look like a button, providing a familiar user interface element for actions like submitting a form or navigating to a new page. This tutorial will explore several methods for styling standard HTML <a> (anchor) tags to resemble buttons using CSS, allowing for a consistent look and feel across your web application.

The Basic Approach: CSS Styling

The most common and flexible way to style a link as a button is to apply CSS rules that mimic the appearance of a typical button. This involves setting properties for background color, text color, padding, borders, font properties, and potentially shadows.

Here’s a basic example:

.button {
  font: bold 11px Arial;
  text-decoration: none; /* Remove underline from links */
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

And the corresponding HTML:

<a href="#" class="button">Example Link</a>

This CSS provides a basic button appearance. You can adjust the colors, fonts, and border styles to match your website’s design. Removing the text-decoration: none; is crucial for removing the default underline associated with links.

Enhancing the Button Appearance

You can refine the button style further by adding more CSS properties:

Rounded Corners: Use border-radius to create rounded corners for a more modern look.
Shadows: box-shadow adds depth and makes the button appear more interactive.
Hover Effects: Change the background color or shadow on hover to provide visual feedback to the user.
Padding and Margin: Adjust the padding and margin to control the button’s size and spacing.

Here’s an example with rounded corners, a shadow, and a hover effect:

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}

.link_button:hover {
    background: #2962A3;
}

<a href="#" class="link_button">Example Link</a>

Using the `<button>` element within an `<a>` tag

Another approach is to wrap a standard HTML <button> element inside an <a> tag. This allows you to leverage the browser’s built-in button styling while still benefiting from the linking capabilities of the <a> tag.

<a href="somepage.html">
  <button type="button">Text of Some Page</button>
</a>

This is generally well-supported across modern browsers (IE9+, Chrome, Safari, Firefox). Note that the button’s appearance might be slightly different depending on the browser and operating system.

The `appearance` Property (Advanced)

CSS3 introduced the appearance property, which allows you to style an element to look like a native UI element, including a button.

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<a class="btn">CSS Button</a>

However, browser support for this property is not universal. Specifically, Internet Explorer does not currently support it. Therefore, it’s best to use this in conjunction with fallback styles for broader compatibility.

When to Use Which Method?

CSS Styling: This provides the most control and customization options. It’s the preferred method when you need a specific look and feel that might differ from standard button styles.
<button> inside <a>: Good for quick implementation and decent browser support, but might require some CSS adjustments to ensure consistent styling across browsers.
appearance Property: Useful for quickly applying native button styles, but limited browser support necessitates fallback styles.

By combining these techniques and understanding their strengths and weaknesses, you can create links that seamlessly blend into your website’s design and provide a polished user experience.