How to Create Outline Button in HTML?

Last Updated : 22 Apr, 2024

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

Using CSS Border Property

In this approach, The HTML file defines a simple outline button styled using CSS. The button has padding, a green border, green text color, and rounded corners. It is implemented as an anchor <a> element with the class outline-button applied for styling.

Example: The example below shows an outline button by using the CSS border property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Outline Button in HTML
    </title>

    <style>
        .outline-button {
            padding: 10px 20px;
            border: 2px solid green;
            color: green;
            text-decoration: none;
            display: inline-block;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h3>Outline Button using CSS Border Property</h3>
    <a href="#" class="outline-button">
        Outline Button
    </a>
</body>

</html>

Output:

Using CSS Outline Property

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.

HTML

<!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>