How to Add Border to a Button in CSS

Author:

Introduction

Adding a border to a button can enhance its appearance and make it stand out. With CSS, you can easily add different types of borders, including solid, dashed, or dotted, as well as control the color, thickness, and style of the border. In addition to basic borders, you can also customize hover effects and add rounded corners to the button.

In this tutorial, you'll learn how to add and customize a border to a button using CSS.

Problem Statement

Create a CSS code that:

  • Adds a border to a button.
  • Styles the border with different colors, thickness, and styles.
  • Optionally adds a hover effect to change the border style when hovered.

Example:

  • Input: A button element with the text "Border Button".
  • Output: A button with a border that changes on hover.

Solution Steps

  1. Use the <button> Element: Create a button in HTML.
  2. Add a Border with CSS: Use the border property to add and customize the border.
  3. Add Hover Effect (Optional): Use the :hover pseudo-class to change the border on hover.

HTML Structure

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

        /* Step 2: Add hover effect to change border color */
        .border-button:hover {
            border-color: #2980b9; /* Darker blue border on hover */
            background-color: #f2f2f2; /* Light background on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="border-button">Border 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: Add a Border to the Button

The .border-button class is used to style the button and add a border.

.border-button {
    font-size: 1.5rem;
    color: #3498db; /* Text color */
    background-color: white; /* White background */
    padding: 10px 30px; /* Padding inside the button */
    border: 3px solid #3498db; /* Solid blue border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition for hover */
}

  • border: 3px solid #3498db: This adds a solid blue border with a thickness of 3 pixels. The format is border-width border-style border-color.

  • border-radius: 5px: This rounds the corners of the button for a softer look.

  • transition: all 0.3s ease: This ensures that any changes to the button (like color or border) happen smoothly.

Step 2: Add Hover Effect

To make the button more interactive, the :hover pseudo-class is used to change the border color and background when the button is hovered.

.border-button:hover {
    border-color: #2980b9; /* Darker blue border on hover */
    background-color: #f2f2f2; /* Light background on hover */
}

  • border-color: #2980b9: When the button is hovered, the border changes to a darker blue to provide visual feedback.

  • background-color: #f2f2f2: The background color lightens when hovered to add contrast with the darker border.

Customizing the Border

You can customize the border further by changing the style, width, or color. Here are a few examples:

Dashed Border

border: 3px dashed #3498db;

This will create a dashed blue border.

Dotted Border

border: 2px dotted #e74c3c;

This will create a red, dotted border with 2px thickness.

No Border on Hover

You can also remove the border entirely when hovered:

.border-button:hover {
    border: none;
    background-color: #2980b9; /* Solid background on hover */
    color: white; /* Change text color on hover */
}

Conclusion

Adding a border to a button in CSS is straightforward using the border property. You can control the width, style, and color of the border, and use the :hover pseudo-class to create interactive effects. By customizing the border and adding a smooth transition, you can create buttons that enhance the user experience and provide visual feedback when hovered.

Comments

Post a Comment

Leave Comment