How to Create an Outline Button in CSS

Introduction

An outline button (also known as a ghost button) is a button with only an outlined border and transparent background. These buttons are often used in modern web design for a minimalist, sleek look. They can be easily styled with CSS, using properties like border, background, and color.

In this tutorial, you'll learn how to create an outline button using CSS. We'll also add hover effects to make the button interactive.

Problem Statement

Create a CSS code that:

Styles a button with an outline (border) and no background.
Adds a hover effect that fills the button with a background color and changes the text color.

Example:

Input: A button element with the text "Outline Button".
Output: A button with an outlined border that changes appearance on hover.

Solution Steps

Use the <button> Element: Create a button in HTML.
Add Outline Style with CSS: Use the border and background properties to create an outline effect.
Add Hover Effect: Style the button to change background and text color when hovered.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Button</title>
    <style>
        /* Step 1: Style the outline button */
        .outline-button {
            font-size: 1.5rem;
            color: #3498db; /* Text color */
            background-color: transparent; /* Transparent background */
            padding: 10px 30px;
            border: 2px solid #3498db; /* Blue outline */
            border-radius: 5px; /* Rounded corners */
            cursor: pointer;
            transition: all 0.3s ease; /* Smooth transition for hover */
        }

        /* Step 2: Hover effect to fill the background and change text color */
        .outline-button:hover {
            background-color: #3498db; /* Fill background with blue */
            color: white; /* Change text color to white */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="outline-button">Outline Button</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Outline Button

The .outline-button class is used to style the button with an outline and transparent background.

.outline-button {
    font-size: 1.5rem;
    color: #3498db; /* Text color */
    background-color: transparent; /* Transparent background */
    padding: 10px 30px; /* Padding inside the button */
    border: 2px solid #3498db; /* Blue border outline */
    border-radius: 5px; /* Rounded corners for a softer look */
    cursor: pointer; /* Pointer cursor to indicate button is clickable */
    transition: all 0.3s ease; /* Smooth transition effect for hover */
}

background-color: transparent: This makes the button's background fully transparent, leaving only the text and border visible.
border: 2px solid #3498db: Adds a 2px solid blue outline around the button.
color: #3498db: The text color matches the border to create a cohesive outline effect.
border-radius: 5px: Gives the button slightly rounded corners for a modern look.
transition: all 0.3s ease: Ensures a smooth transition when the button is hovered.

Step 2: Add Hover Effect

When the button is hovered, the background fills with color and the text color changes to create an interactive effect.

.outline-button:hover {
    background-color: #3498db; /* Fill background with blue */
    color: white; /* Change text color to white */
}

background-color: #3498db: On hover, the background fills with the same blue color as the border.
color: white: The text color changes to white to contrast with the blue background.

Customization

Change the Outline Color

You can easily change the color of the outline by modifying the border and color properties:

.outline-button {
    border: 2px solid #e74c3c; /* Red outline */
    color: #e74c3c; /* Red text */
}

.outline-button:hover {
    background-color: #e74c3c; /* Red background on hover */
}

Add a Box Shadow

For more emphasis, you can add a subtle box shadow to make the button stand out more:

.outline-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow */
}

Change the Border Style

You can also change the border style to dashed or dotted:

.outline-button {
    border: 2px dashed #3498db; /* Dashed blue outline */
}

Conclusion

Creating an outline button in CSS is simple and effective for adding a sleek, modern look to your website. By using the border and background-color properties, you can achieve the outlined effect, and adding a hover effect with smooth transitions makes the button interactive and visually appealing. This type of button is often used for secondary actions or minimalist designs.

Java Guides

Search This Blog