How to make an HTML anchor tag (or link) look like a button?

html

responsive-design

best-practices

accessibility

byAlex Kataev·Sep 6, 2024

Transform an anchor tag (<a>) into a button-styled element with CSS. Essential styles include padding, background-color, border-radius, and text-decoration:none. Apply the class to your <a> tag for an immediate button look:

.btn {
  padding: 8px 15px; // Look ma, no hands; padding gives 'space' around the text.
  background-color: #3498db; // This blue? Daby-dee Daby-dye.
  color: #fff; // To boldly show what no link has shown before.
  text-decoration: none; // Underlines are so '90s.
  border: none; // Who set us up the border?
  border-radius: 4px; // Because rectangles are boring. 
  font-weight: bold; // We have fonts. The best fonts.
  display: inline-block; // All inline, no waiting.
}

<a href="your-link.html" class="btn">Click Me</a>

The comprehensive CSS .btn class immediately gives your links a button's visual appeal.

Getting the stylish look right (best practices)

When crafting a button-like hyperlink, there are several aspects you can tweak for optimal attractiveness and functionality:

Visual Comfort: Padding can be adjusted for users' comfort.
Aesthetics: Background and font colors should be selected for high visibility and attractiveness.
Semantics: Always add role="button" to signal purpose to accessibility tools.
Consistency: The button's appearance should be tested across different web browsers to ensure optimal user experience.

Don't forget about Accessibility (best practices)

Keeping accessibility in mind while styling <a> tags as buttons is of utmost importance:

Keyboard Navigation: Your button should still be functioning with keyboard commands.
Screen readers: Always include aria-label or similar appropriate attribute to communicate the button action to these users.
Focus Styles: Maintain or customize :focus styles to provide visual interaction cue to keyboard users.

Are there alternative solutions?

Here are some other popular methods to achieve the button-like appearance:

Bootstrap Frameworks: Using .btn classes in Bootstrap is an easy shortcut for stylish buttons.
Form Controls: You can also consider <input type="button"> as a semantically-correct alternative, easily styled similarly.
Semantic Pitfalls: Combining a <a> within a <button> is not valid HTML and should be avoided.

Cross-browser compatibility (best practices)

Sometimes browser-specific CSS rendering can be tricky. Here's how to handle it:

Vendor Prefixes: Include those for CSS properties especially prone to incompatible behavior.
Testing: Regularly validate your styles across browsers like Chrome, Firefox, Safari, and Edge.
Fallbacks: Incorporate fallback properties for your button in older browsers, ensuring equivalent function.

Danger! Danger! Frameworks ahead! (Boostrap)

Though CSS frameworks like Bootstrap are tempting, bear in mind:

Inclusion Costs: Bootstrap requires including its own CSS and JS, which might weigh your site down.
Customization: Though it provides diversity with .btn and .btn-* classes, you may want to apply your own CSS overrides for total uniqueness.

explain-codes / Html / How to make an HTML anchor tag (or link) look like a button?

Linked

Change cursor to hand when a mouse hovers over a table row



Span inside anchor or anchor inside span or doesn't matter?



How can I change the thickness of my `` tag



Javascript - href vs onclick for callback function on Hyperlink



Input type="submit" Vs button tag are they interchangeable?

