How to Create HTML Button Links: Complete Guide

You can create an HTML button that acts like a link by using JavaScript’s window.location method or by wrapping the button element within an anchor tag. The most accessible and maintainable approach is using an anchor tag with button-like CSS styling, while JavaScript offers greater flexibility for dynamic navigation scenarios.

Contents

• Creating a Button That Acts Like a Link
• Using the Anchor Tag Method
• Using JavaScript with window.location
• Accessibility Considerations
• CSS Styling to Make Buttons Look Like Links
• Best Practices and Recommendations

Creating a Button That Acts Like a Link

When you need a button that navigates to another page, you have several approaches to consider. Each method has its advantages and trade-offs in terms of accessibility, maintainability, and functionality.

The most common approaches include:

• Anchor tag with button styling - wrapping a button in an anchor tag
• JavaScript redirection - using onclick events to navigate
• Form submission - using a form with method=“GET”
• CSS-only solutions - using CSS pointer-events

Let’s explore each method in detail.

Using the Anchor Tag Method

The anchor tag method is the most accessible and semantically correct approach. It involves wrapping a button element within an anchor tag, which preserves the button’s appearance while providing link functionality.

<a href="/destination-page" class="button-link">
  <button>Click to Navigate</button>
</a>

This approach maintains:

• Clean URLs - no extra parameters are added
• Accessibility - screen readers can interpret it as a link
• Keyboard navigation - users can tab to it and press Enter
• Right-click functionality - users can open in new tab

For a cleaner implementation without nested elements, you can style an anchor tag to look like a button:

<a href="/destination-page" class="button-link">
  Click to Navigate
</a>

With CSS:

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.button-link:hover {
  background-color: #0056b3;
  text-decoration: none;
}

.button-link:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

Using JavaScript with window.location

JavaScript provides more flexibility for dynamic navigation, especially when you need to add logic before redirecting.

<button onclick="window.location.href='/destination-page'">
  Click to Navigate
</button>

For more complex scenarios, you can use a dedicated function:

<button onclick="navigateToPage('/destination-page')">
  Click to Navigate
</button>

<script>
function navigateToPage(url) {
  // Add any logic here (checks, analytics, etc.)
  window.location.href = url;
}
</script>

Important considerations for JavaScript approach:

• Ensure the script is loaded before the button is clicked
• Provide fallback content for users with JavaScript disabled
• This method maintains clean URLs since it doesn’t use query parameters
• You can add event listeners instead of inline onclick for better separation of concerns

Example with event listeners:

<button id="navButton">Click to Navigate</button>

<script>
document.getElementById('navButton').addEventListener('click', function() {
  window.location.href = '/destination-page';
});
</script>

Accessibility Considerations

When creating button-like links, accessibility should be your top priority. Here are key considerations:

Semantic HTML

Use proper HTML elements that match their intended purpose:

• For navigation links, use <a> tags
• For actions, use <button> tags
• Don’t use <button> elements when you need link-like behavior

ARIA Attributes

When using JavaScript-based navigation, add appropriate ARIA attributes:

<button onclick="navigateToPage('/destination-page')" 
        aria-label="Navigate to destination page">
  Click to Navigate
</button>

Keyboard Navigation

Ensure your buttons work with keyboard navigation:

• Users should be able to tab to the element
• Pressing Enter or Space should trigger navigation
• Provide visible focus indicators

Screen Reader Support

Screen readers should announce the button appropriately:

• Use descriptive text instead of generic “Click Here”
• Provide context about where the link leads
• Consider adding role="link" when using button elements for navigation

CSS Styling to Make Buttons Look Like Links

Sometimes you want the opposite - a link that looks like a button. Here are CSS techniques for both scenarios:

Button That Looks Like a Link

.button-link {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

.button-link:hover {
  color: #0056b3;
}

.button-link:focus {
  outline: 1px solid #007bff;
}

Link That Looks Like a Button

.link-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.link-button:hover {
  background-color: #218838;
  text-decoration: none;
}

.link-button:focus {
  outline: 2px dashed #fff;
  outline-offset: 2px;
}

Modern CSS with Variables

For maintainable styling, use CSS custom properties:

:root {
  --button-bg: #007bff;
  --button-hover: #0056b3;
  --button-text: white;
  --button-radius: 5px;
  --button-padding: 10px 20px;
}

.styled-button-link {
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.styled-button-link:hover {
  background-color: var(--button-hover);
  text-decoration: none;
}

Best Practices and Recommendations

When to Use Each Method

Use the anchor tag method when:

• You need maximum accessibility
• You want clean, semantic HTML
• The navigation is straightforward without logic
• You need right-click functionality
• SEO is important (search engines follow links better)

Use JavaScript when:

• You need to perform actions before navigation
• You want to track clicks with analytics
• You need conditional navigation based on user state
• You’re working within a single-page application framework

Performance Considerations

• Anchor tags are faster (no JavaScript execution)
• JavaScript methods add processing overhead
• Consider lazy-loading JavaScript for non-critical navigation

Testing Requirements

Test your button-like links with:

• Mouse clicks
• Keyboard navigation (Tab, Enter, Space)
• Screen readers (VoiceOver, NVDA, JAWS)
• Touch devices
• JavaScript disabled scenarios

Example Complete Implementation

Here’s a complete example combining best practices:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Link Example</title>
    <style>
        .primary-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            border: none;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 1.2;
        }
        
        .primary-button:hover {
            background-color: #0056b3;
            text-decoration: none;
            transform: translateY(-1px);
        }
        
        .primary-button:focus {
            outline: 2px solid #0056b3;
            outline-offset: 2px;
        }
        
        .primary-button:active {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Anchor method with button styling -->
    <a href="/dashboard" class="primary-button" aria-label="Go to dashboard">
        View Dashboard
    </a>
    
    <!-- JavaScript method with fallback -->
    <noscript>
        <a href="/profile" class="primary-button">
            View Profile
        </a>
    </noscript>
    
    <button onclick="navigateWith('/profile')" class="primary-button" 
            aria-label="View profile (requires JavaScript)">
        View Profile
    </button>
    
    <script>
        function navigateWith(url) {
            // Add any custom logic here
            console.log('Navigating to:', url);
            window.location.href = url;
        }
    </script>
</body>
</html>

This comprehensive approach ensures your button-like links work across all environments while maintaining accessibility and clean URLs.

Sources

1. MDN Web Docs - HTMLButtonElement
2. MDN Web Docs - window.location
3. WCAG - Understanding Success Criterion 2.4.4
4. A11Y Project - Buttons vs Links
5. CSS-Tricks - Styling Links and Buttons

Conclusion

Creating an HTML button that acts like a link requires balancing functionality, accessibility, and user experience. The anchor tag method with button-like styling provides the most accessible solution with clean URLs, while JavaScript methods offer greater flexibility for dynamic scenarios. Always prioritize semantic HTML, ensure keyboard navigation works properly, and test across different devices and assistive technologies. Choose the method that best fits your specific use case while maintaining the highest standards of accessibility and user experience.