PUBLISHED ON: AUGUST 19, 2021
How to style outline buttons with CSS?
We Create a button with HTML <button> element. But simply adding a dull and boring button will not make your webpage attractive to the user. The button can be designed in various ways to make it look visually appealing. One way to do so is to add an outline to the buttons. In this tutorial, we will learn to add an outline to the buttons with CSS.
Adding outline to button
The outline buttons contain a thin colored border and colored text. The background color of the button is white. So add border color using CSS border property. Add background-color: white to it too. In addition to that, we can add some other CSS properties like padding, font-size to it.
Example: Adding outline buttons with CSS
In this example, we have added an outline-style button with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.btn {
border: 2px solid black;
background-color: white;
color: black;
padding: 16px ;
font-size: 20px;
cursor: pointer;
}
/* Green */
.green {
border-color: green;
color: green;
}
/* Blue */
.blue {
border-color: blue;
color: blue;
}
.orange {
border-color: orange;
color: orange;
}
.red {
border-color: red;
color: red;
}
.gray {
border-color: gray;
color: gray;
}
</style>
</head>
<body>
<h2> Outline styled button </h2>
<button class="btn green">Button</button>
<button class="btn blue">Button</button>
<button class="btn orange">Button</button>
<button class="btn red">Button</button>
<button class="btn gray">Button</button>
</body>
</html>
Output
Here is the output of the above example.
Example: Styling outline buttons with CSS
Here in this example, we have added a :hover effect to the outline buttons.
Conclusion
In this tutorial, we have learned to style the outline button with CSS. The outline is added to the button with border property. In addition to that, we can also add a hover effect to it.
