How to Add Double Border to Button in CSS

Author:

Introduction

Adding a double border to a button can enhance its appearance, giving it a more stylish and unique look. CSS provides different ways to create a double border effect, either by using the border property with the double value or using pseudo-elements for more customization.

In this tutorial, you'll learn how to add a double border to a button using both methods in CSS.

Development Steps

  1. Use the <button> Element: Create a button in HTML.
  2. Method 1 - Add Double Border Using CSS border Property: Use the border-style: double to create a simple double border.
  3. Method 2 - Create Double Border Using Pseudo-Elements: Use the ::before or ::after pseudo-elements for more complex double border effects.
  4. Add Hover Effects: Optionally, add hover effects for better interactivity.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Border Button</title>
    <style>
        /* Step 1: Style the button (Method 1) */
        .double-border-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: 4px double #ffffff; /* Double border with white color */
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Optional: Add hover effect */
        .double-border-button:hover {
            background-color: #2980b9;
        }

        /* Step 2: Double border using pseudo-elements (Method 2) */
        .pseudo-double-border-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: 2px solid #fff; /* Inner border */
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pseudo-double-border-button::before {
            content: '';
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border: 2px solid #fff; /* Outer border */
            border-radius: 8px;
            pointer-events: none;
        }

        /* Optional: Add hover effect for pseudo-elements */
        .pseudo-double-border-button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <!-- Method 1: Simple double border -->
        <button class="double-border-button">Double Border</button>
        
        <!-- Method 2: Double border using pseudo-elements -->
        <button class="pseudo-double-border-button" style="margin-left: 20px;">Double Border (Pseudo)</button>
    </div>

</body>
</html>

Explanation

Method 1: Add Double Border Using border-style: double

The simplest way to add a double border to a button is by using the border-style property with the value double. This creates a double-lined border with the specified color and width.

.double-border-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db;
    padding: 12px 30px; /* Padding inside the button */
    border: 4px double #ffffff; /* Double border with white color */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition */
}
  • border: 4px double #ffffff: This creates a 4px wide double border with white color. The space between the two lines of the border depends on the width of the border.

Method 2: Create a Double Border Using Pseudo-Elements

For more flexibility, you can create a double border using pseudo-elements (::before or ::after). This method allows you to customize the space between the borders or apply different effects.

.pseudo-double-border-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db;
    padding: 12px 30px;
    border: 2px solid #fff; /* Inner border */
    border-radius: 5px; /* Rounded corners */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition */
}

.pseudo-double-border-button::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid #fff; /* Outer border */
    border-radius: 8px; /* Slightly larger radius for outer border */
    pointer-events: none; /* Prevent the outer border from affecting the button */
}

  • border: 2px solid #fff: This creates the inner border of the button.

  • Pseudo-element ::before: This creates the outer border around the button. The top, left, right, and bottom properties position the outer border slightly outside the button to create a space between the two borders.

Optional: Add Hover Effects

You can make the button interactive by adding hover effects. This example changes the background color when hovered.

.double-border-button:hover, .pseudo-double-border-button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

Customization

Change Border Color

You can easily change the color of the borders by modifying the border-color value:

border: 4px double #f39c12; /* Orange double border */

Adjust Border Width

To make the border thicker or thinner, adjust the border-width property:

border: 6px double #fff; /* Thicker double border */

Add Border Animation

You can add animation to the double border using the animation property. Here’s an example that animates the pseudo-element border:

@keyframes borderExpand {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.pseudo-double-border-button:hover::before {
    animation: borderExpand 0.3s ease-out;
}

This will make the outer border expand slightly on hover.

Conclusion

Creating a double border on a button is easy using the border-style: double property or by using pseudo-elements for more customization. You can adjust the border color, width, and even add animations to create a more dynamic effect. Both methods provide flexibility, and you can choose the one that best suits your design.

Comments

Post a Comment

Leave Comment