CSS Buttons

Buttons are one of the most important interactive elements on any website. Styling them properly improves usability and makes your site feel professional.

Interactive Button Demos

Hover over the buttons below to see the effects in action:

Key Styling Properties

• background-color: Sets the primary color of the button.
• border: Use this for outline buttons or to remove default styles.
• cursor: pointer; Important for telling users the element is clickable.
• transition: Makes state changes (like hover) feel smooth.
• box-shadow: Adds depth and feedback on hover.

The CSS Code

.button {
    background-color: #2e7d52;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.button:hover {
    background-color: #1b5e20;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}