Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Style Outline Buttons with CSS
The buttons on a web page can be styled and made attractive using CSS styles and a outline can be set. The text and background color can be easily changed. Also, the default size can be changed. With that, the shape can be given rounded corners using the border-radius property. Let us see how to style outline buttons with HTML and CSS.
Buttons
The <button> element is used to set different buttons for information, success, warning and danger. These are the different button styles we will set with CSS −
<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>
Style the buttons
The buttons are styled like this. For the buttons, the cursor property is set to pointer −
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 6px;
width: 140px;
}
The success button
The success button is styled with a different background color using the background-color property. The text color is set using the color property. With that, the color will change on hovering since under the :hover selector a different background color is set −
.Success {
border:2px solid #4caf50;
color:#4caf50
}
.Success:hover {
background-color: #46a049;
color:white;
}
The information button
The info button is styled with a different background color using the background-color property. The text color is set using the color property. With that, the color will change on hovering since under the :hover selector a different background color is set −
.Info {
border:2px solid #2196f3;
color:#2196f3;
}
.Info:hover {
background: #0b7dda;
color:white;
}
The danger button
The danger button is styled with a different background color using the background-color property. The text color is set using the color property. With that, the color will change on hovering since under the :hover selector a different background color is set −
.Danger {
border:2px solid #f44336;
color:#f44336;
}
.Danger:hover {
background: #da190b;
color:white;
}
The warning button
The warning button is styled with a different background color using the background-color property. The text color is set using the color property. With that, the color will change on hovering since under the :hover selector a different background color is set.
.Warning {
border:2px solid #ff9800;
color:#ff9800;
}
.Warning:hover {
background: #e68a00;
color:white;
}
Example
The following is the code to style outline buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 6px;
width: 140px;
}
.Success {
border:2px solid #4caf50;
color:#4caf50
}
.Success:hover {
background-color: #46a049;
color:white;
}
.Info {
border:2px solid #2196f3;
color:#2196f3;
}
.Info:hover {
background: #0b7dda;
color:white;
}
.Warning {
border:2px solid #ff9800;
color:#ff9800;
}
.Warning:hover {
background: #e68a00;
color:white;
}
.Danger {
border:2px solid #f44336;
color:#f44336;
}
.Danger:hover {
background: #da190b;
color:white;
}
.Default {
border:2px solid #e7e7e7;
color: black;
}
.Default:hover {
background: #ddd;
}
</style>
</head>
<body>
<h1> Buttons Example</h1>
<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>
3K+ Views
