CSS Buttons - Detailed Overview

Introduction to CSS Buttons

Buttons are essential components in web design, used for actions like submitting forms, navigating to other pages, or triggering events. CSS can be used to style buttons in various ways, including changing their color, size, and shape.

Examples of CSS Buttons

Basic Button

Basic Button

This example shows a basic button with a default style. It includes a background color, padding, and a hover effect that changes the background color.

CSS used:


.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
    background-color: #0056b3;
}

.button:active {
    transform: scale(0.98);
}
                    
<a href="#" class="button">Basic Button</a>

Rounded Button

Rounded Button

This example demonstrates a button with rounded corners. The `button-rounded` class adds a larger border-radius to create a pill-like shape.

CSS used:


.button-rounded {
    border-radius: 50px;
}
                    
<a href="#" class="button button-rounded">Rounded Button</a>

Large and Small Buttons

Large Button Small Button

This example shows buttons of different sizes. The `button-large` and `button-small` classes adjust the padding and font size of the buttons to make them larger or smaller, respectively.

CSS used:


.button-large {
    padding: 15px 30px;
    font-size: 20px;
}

.button-small {
    padding: 5px 10px;
    font-size: 12px;
}
                    
<a href="#" class="button button-large">Large Button</a>
<a href="#" class="button button-small">Small Button</a>

Primary and Secondary Buttons

Primary Button Secondary Button

This example illustrates primary and secondary buttons, using different background colors to distinguish their importance or function. The `button-primary` and `button-secondary` classes apply distinct colors.

CSS used:


.button-primary {
    background-color: #28a745;
}

.button-secondary {
    background-color: #6c757d;
}
                    
<a href="#" class="button button-primary">Primary Button</a>
<a href="#" class="button button-secondary">Secondary Button</a>