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
How to style outline buttons with CSS?
Outline buttons are styled with borders and transparent backgrounds. The button text matches the border color, creating a clean, minimalist appearance. When hovered, these buttons typically fill with color for better user feedback.
Syntax
button {
border: 2px solid color;
background-color: transparent;
color: border-color;
}
button:hover {
background-color: fill-color;
color: white;
}
Basic Outline Button Structure
Outline buttons use the <button> element with specific CSS classes for different button types −
<button class="success">Success</button> <button class="info">Info</button> <button class="warning">Warning</button> <button class="danger">Danger</button> <button class="default">Default</button>
Base Button Styles
All outline buttons share common base styles for consistent appearance −
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: transparent;
font-weight: bold;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
border-radius: 6px;
border: 2px solid;
transition: all 0.3s ease;
}
Example: Complete Outline Button Set
The following example demonstrates different outline button styles with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: transparent;
font-weight: bold;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
border-radius: 6px;
border: 2px solid;
margin: 5px;
transition: all 0.3s ease;
}
.success {
border-color: #4caf50;
color: #4caf50;
}
.success:hover {
background-color: #4caf50;
color: white;
}
.info {
border-color: #2196f3;
color: #2196f3;
}
.info:hover {
background-color: #2196f3;
color: white;
}
.warning {
border-color: #ff9800;
color: #ff9800;
}
.warning:hover {
background-color: #ff9800;
color: white;
}
.danger {
border-color: #f44336;
color: #f44336;
}
.danger:hover {
background-color: #f44336;
color: white;
}
.default {
border-color: #6c757d;
color: #6c757d;
}
.default:hover {
background-color: #6c757d;
color: white;
}
</style>
</head>
<body>
<h2>Outline Buttons</h2>
<button class="success">Success</button>
<button class="info">Info</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
<button class="default">Default</button>
</body>
</html>
Five outline buttons appear with colored borders and transparent backgrounds. When hovered, each button fills with its respective color (green, blue, orange, red, gray) and the text turns white.
Key Properties for Outline Buttons
| Property | Purpose |
|---|---|
border |
Creates the outline effect with colored border |
background-color: transparent |
Makes the button background see-through |
transition |
Smooth animation for hover effects |
:hover |
Changes appearance when mouse hovers over button |
Conclusion
Outline buttons provide a clean, modern design using transparent backgrounds and colored borders. The :hover pseudo-class creates engaging interactions by filling the button with color when users interact with it.
Updated on: 2026-03-15T14:30:09+05:30
4K+ Views
Advertisements