CSS Link Buttons
With a little padding, a background color, and no underline, an ordinary link can look and feel like a clickable button.
A link styled as a button is still a real <a> element, so it keeps normal link behavior like opening in a new tab or being followed by search engines. You are only changing how it looks, not what it does.
Building the button
- Add padding so there is a comfortable clickable area.
- Set a background color and a contrasting text color.
- Remove the underline with text-decoration: none.
- Use display: inline-block so vertical padding is respected.
A basic link button
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 10px 18px;
background-color: #00643c;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
}
</style>
</head>
<body>
<a class="button" href="#signup">Sign up</a>
</body>
</html>Adding hover feedback
A button should react when the pointer is over it. A darker background on <hover> plus a short transition makes the change feel smooth rather than abrupt.
Hover and transition
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #00643c;
transition: background-color 0.2s ease;
}
.button:hover {
background-color: #00492b;
}
</style>
</head>
<body>
<a class="button" href="#signup">Sign up</a>
</body>
</html>Note: For a lighter secondary button, use a transparent background with a colored border, then fill it in on hover. It reads as less prominent than a solid button.
Note: Use a link button when clicking navigates to another page. If the click triggers an action on the current page, a real <button> element is the more accessible choice.
Exercise: CSS Links
Which pseudo-class selects a link that has not yet been visited?
