Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create a link button with borders using CSS
To create a link button with borders using CSS, you style anchor tags to look like buttons by adding borders, padding, and background colors. This technique transforms regular links into visually appealing button elements.
Syntax
a {
border: width style color;
padding: value;
background-color: color;
display: inline-block;
text-decoration: none;
}
Example
The following example creates a link button with a blue border that changes to red on hover −
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 1px solid blue;
padding: 30px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
color: white;
}
</style>
</head>
<body>
<a href="/demo.html" target="_blank">Demo Link</a>
</body>
</html>
A white rectangular button with blue border and black text "Demo Link" appears. When hovered, the button changes to red background with white text.
Key Properties
| Property | Purpose |
|---|---|
border |
Creates the button outline |
padding |
Adds space inside the button |
display: inline-block |
Makes the link behave like a button element |
text-decoration: none |
Removes default link underline |
Conclusion
Creating link buttons with CSS borders involves styling anchor tags with border, padding, and background properties. Use pseudo-classes like :hover to add interactive effects for better user experience.
Updated on: 2026-03-15T12:13:20+05:30
3K+ Views
Advertisements