Styling Buttons with HTML and CSS
Buttons are a fundamental component of web applications, serving as key call-to-action elements. To ensure your buttons attract users and prompt clicks, it's essential to make them visually appealing and distinct within your design.
While HTML buttons come with default styles—including border, background color, text decoration, and color—you often need to customize these to achieve your desired look. Understanding how to override these default properties with CSS will enable you to design buttons that perfectly align with your design requirements.
<button>Click Me!</button>
Button States
- Default
The default state is what the button looks like when the page first loads. - Hover
The hover state occurs when the user places the cursor over the button, providing visual feedback. - Active
The active state is triggered when the user clicks on the button, indicating it is being pressed. - Focus
The focus state is activated when the button is selected via keyboard navigation or other non-mouse actions. - Disabled
The disabled state indicates that the button is not available for interaction, often graying it out or changing its opacity.
To start customizing your button, the first step is to override the default border.
button { border: none; }
Then overwrite the outline in the focus state:
button:focus { outline: none; }
Now we can add a cool style to it:
button { border: none; background-color: #01786a; color: white; padding: 10px 20px; border-radius: 20px; margin-right: 15px; cursor: pointer; font-weight: bold; } button:focus { outline: none; } button:hover { box-shadow: 8px 5px 5px rgba(0, 0, 0, .2); } button:disabled { box-shadow: none; background-color: #7ce1d5; }