How to use CSS Outline Property In HTML
In this approach, create an outline button using the CSS outline property. In the <style> section, the .outline-button class defines styling properties such as padding, color, text decoration, and cursor, with an added green outline. Within the <body>, a heading introduces the button, followed by an anchor element styled with the outline-button class, resulting in the display of an outline button.
Example: The example below shows an outline button by using CSS Outline Property.
<!DOCTYPE html>
<html>
<head>
<title>
Outline Button in HTML
</title>
<style>
.outline-button {
padding: 10px 20px;
color: green;
text-decoration: none;
display: inline-block;
cursor: pointer;
border-radius: 5px;
outline: 2px solid green;
}
</style>
</head>
<body>
<h3>Outline Button in HTML using CSS Outline Property</h3>
<a href="#" class="outline-button">
Outline Button
</a>
</body>
</html>
Output:
How to Create Outline Button in HTML?
The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect using CSS Outline Property and CSS Border Property.
Use the below approaches to Create Outline Button in HTML:
Table of Content
- Using CSS Border Property
- Using CSS Outline Property