How to Make Modern Rounded Buttons in HTML and CSS

Author:

Introduction

Rounded buttons are stylish and versatile, and they can be customized in various ways using CSS. In this guide, you will learn how to create different types of buttons with various sizes, colors, and modern styles. We will demonstrate how to customize the appearance of buttons to suit different design needs.

Demo:

Development Steps

  1. Create Basic HTML: Write the HTML structure for multiple buttons.
  2. Style the Buttons with CSS: Define the base styles for different button sizes and colors.
  3. Add Modern Hover Effects: Make the buttons interactive with smooth hover effects.

Step 1: Create Basic HTML

We will create multiple buttons with different classes for different sizes and colors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Rounded Buttons Example</title>
</head>
<body>

    <!-- Step 1: Multiple buttons with different styles -->
    <div class="container">
        <button class="button small primary">Small Button</button>
        <button class="button medium success">Medium Button</button>
        <button class="button large danger">Large Button</button>
    </div>

</body>
</html>

Explanation:

  • The <button> elements have different classes like small, medium, and large for size and primary, success, and danger for color.
  • The buttons are inside a <div> with the class container for centering and spacing.

Step 2: Style the Buttons with CSS

We’ll apply different sizes and colors for the buttons while ensuring they all maintain a modern rounded look.

/* Step 2: Base button styles */
.button {
    border: none;
    border-radius: 50px; /* Fully rounded button */
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

/* Size variations */
.small {
    font-size: 14px;
    padding: 8px 16px;
}

.medium {
    font-size: 16px;
    padding: 12px 24px;
}

.large {
    font-size: 18px;
    padding: 16px 32px;
}

/* Color variations */
.primary {
    background-color: #3498db; /* Blue background */
    color: white;
}

.success {
    background-color: #2ecc71; /* Green background */
    color: white;
}

.danger {
    background-color: #e74c3c; /* Red background */
    color: white;
}

/* Center the container */
.container {
    text-align: center;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
}

Explanation:

  • Base Styles: All buttons have rounded corners (border-radius: 50px) and smooth transitions for the hover effect.
  • Size Variations: Each button size (small, medium, large) has different font-size and padding.
  • Color Variations: The buttons have different background colors (primary, success, danger), which are styled as blue, green, and red.
  • container: Ensures the buttons are centered with space between them using flexbox.

Step 3: Add Modern Hover Effects

We’ll add smooth hover effects that change the background color and slightly increase the button size when hovered.

/* Step 3: Hover effects */
.button:hover {
    transform: scale(1.05); /* Slightly enlarge the button */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
}

/* Change background colors on hover */
.primary:hover {
    background-color: #2980b9; /* Darker blue */
}

.success:hover {
    background-color: #27ae60; /* Darker green */
}

.danger:hover {
    background-color: #c0392b; /* Darker red */
}

Explanation:

  • transform: scale(1.05): Enlarges the button by 5% on hover to create a subtle pop-out effect.
  • box-shadow: Adds a soft shadow to give the button more depth when hovered.
  • Color Transitions: The hover effect changes the button’s background color to a darker shade of the original color.

Complete Code Example

Here’s the full HTML and CSS code to create different modern rounded buttons with varying sizes, colors, and hover effects:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Rounded Buttons Example</title>
    <style>
        /* Base button styles */
        .button {
            border: none;
            border-radius: 50px; /* Fully rounded button */
            font-family: Arial, sans-serif;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
        }

        /* Size variations */
        .small {
            font-size: 14px;
            padding: 8px 16px;
        }

        .medium {
            font-size: 16px;
            padding: 12px 24px;
        }

        .large {
            font-size: 18px;
            padding: 16px 32px;
        }

        /* Color variations */
        .primary {
            background-color: #3498db; /* Blue background */
            color: white;
        }

        .success {
            background-color: #2ecc71; /* Green background */
            color: white;
        }

        .danger {
            background-color: #e74c3c; /* Red background */
            color: white;
        }

        /* Hover effects */
        .button:hover {
            transform: scale(1.05); /* Slightly enlarge the button */
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
        }

        .primary:hover {
            background-color: #2980b9; /* Darker blue */
        }

        .success:hover {
            background-color: #27ae60; /* Darker green */
        }

        .danger:hover {
            background-color: #c0392b; /* Darker red */
        }

        /* Center the container */
        .container {
            text-align: center;
            margin-top: 100px;
            display: flex;
            justify-content: center;
            gap: 15px; /* Space between buttons */
        }
    </style>
</head>
<body>

    <div class="container">
        <button class="button small primary">Small Button</button>
        <button class="button medium success">Medium Button</button>
        <button class="button large danger">Large Button</button>
    </div>

</body>
</html>

Output

Conclusion

In this tutorial, you learned how to create modern rounded buttons with different sizes and colors using HTML and CSS. Each button has a smooth hover effect, making them interactive and stylish. You can easily adjust the size, color, and hover effects to fit your design needs.

Comments

Post a Comment

Leave Comment