? CSS Buttons

CSS Buttons are a core part of any website’s user interface. Well-designed buttons help users submit forms, navigate between pages, and trigger actions in a clear and intuitive way.

With CSS, you can style buttons using colors, padding, border radius, shadows, hover effects, and transitions to create interactive elements that match your brand and improve user experience.

⚡ Quick Overview

A common pattern is to create a reusable .btn class that defines the base look and feel of all buttons. You can then extend it with modifier classes like .btn-primary, .btn-danger, or .btn.disabled for different states and variations.

? Key Concepts

• Use a shared .btn class for consistent button styling across your site.
• Control spacing with padding to make buttons comfortable to click or tap.
• Use border-radius to create rounded or pill-shaped buttons.
• Add :hover and :active pseudo-classes for interaction feedback.
• Create a disabled state with a class like .disabled and the HTML disabled attribute.
• Ensure enough color contrast between text and background for accessibility.

? Syntax / Theory

Here is a simple, reusable CSS pattern for buttons. It includes base styles, hover and active feedback, and a disabled state for non-clickable buttons.

/* Reusable button styles for a consistent UI */
.btn {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover effect for better visual feedback */
.btn:hover {
background-color: #0056b3;
}
/* Slight scale on click for a pressed feel */
.btn:active {
transform: scale(0.97);
}
/* Disabled state to show a non-interactive button */
.btn.disabled {
background-color: #cccccc;
cursor: not-allowed;
}

? Code Example (HTML Markup)

In HTML, you can use the <button> element or an <a> tag styled as a button. Apply the .btn class (and optional modifiers) to reuse the same styles.

<!-- Common button variations using the .btn class -->
<button class="btn">Primary Button</button>
<button class="btn">Submit</button>
<button class="btn disabled" disabled>Disabled</button>
<a href="#" class="btn">Link as Button</a>

? Live Output: Button Examples

The shared .btn class gives each button the same padding, color, and rounded corners. The :hover state darkens the background color for better interactivity, and the :active state slightly scales the button to mimic a physical press.

The .disabled class (plus the disabled attribute in HTML) visually dims the button and disables pointer interaction, clearly indicating that the action is not available.