W3.CSS Buttons
Buttons
W3.CSS makes it easy to create and style buttons.
Buttons can have colors, sizes, borders, rounded corners, hover effects, and more.
Basic Buttons
The w3-button class creates a W3.CSS button:
Example
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-green">Button</button>
<button class="w3-button w3-blue">Button</button>
Try it Yourself »
Button Elements
The w3-button class can be used with different HTML elements like:
<input><button><a>
Example
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button</button>
<a href="#" class="w3-button w3-black">Link Button</a>
Try it Yourself »
w3-button vs w3-btn
W3.CSS provides two main button classes:
| Class | Description |
|---|---|
w3-button |
A button with a grey hover effect. Default color is inherited. |
w3-btn |
A button with a shadow hover effect. Default color is black. |
Move the mouse over the buttons to see the difference:
Example
<button class="w3-button w3-black">w3-button</button>
<button class="w3-btn w3-black">w3-btn</button>
Try it Yourself »
Which Should I Use?
Use w3-button for most buttons.
Use w3-btn when you want the shadow hover effect.
Button Colors
Add any W3.CSS color class to change the button color:
Example
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-blue">Blue</button>
<button class="w3-button w3-green">Green</button>
Try it Yourself »
Hover Colors
Use a w3-hover-color class to change the color when the mouse moves over a button.
Example
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-blue">Blue</button>
Try it Yourself »
Try More Colors »
Rounded Buttons
Combine button classes with the W3.CSS round classes:
Example
<button class="w3-button w3-blue w3-round">Round</button>
<button class="w3-button w3-blue w3-round-large">Large</button>
<button class="w3-button w3-blue w3-round-xlarge">XLarge</button>
<button class="w3-button w3-blue w3-round-xxlarge">XXLarge</button>
Try it Yourself »
Button Sizes
Use the W3.CSS font size classes to create buttons of different sizes:
Example
<button class="w3-button w3-small">Small</button>
<button class="w3-button">Normal</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">XLarge</button>
Try it Yourself »
Button Borders
Combine button classes with border and round classes:
Example
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
Try it Yourself »
Full-Width Buttons
The w3-block class makes a button fill the width of its parent:
Disabled Buttons
Use the standard HTML disabled attribute to disable a button:
Example
<button class="w3-button w3-black">Enabled</button>
<button class="w3-button w3-black" disabled>Disabled</button>
Try it Yourself »
For HTML elements that do not support the disabled attribute, use the w3-disabled class.
Build Card Actions
Buttons are often used as actions inside cards.
Norway
Explore mountains, fjords, and the Northern Lights.
Example
<div class="w3-card">
<div class="w3-container">
<h3>Norway</h3>
<p>Explore mountains, fjords, and the Northern Lights.</p>
</div>
<div class="w3-container w3-padding-16">
<button class="w3-button w3-green w3-round-large">Explore</button>
<button class="w3-button w3-white w3-border w3-round-large">Learn More</button>
</div>
</div>
Try it Yourself »
What You Have Learned
w3-buttoncreates a W3.CSS buttonw3-btnadds a shadow hover effect- Buttons can use W3.CSS colors and hover colors
- Round, size, border, and padding classes can be combined with buttons
w3-blockcreates a full-width button- HTML buttons can be disabled with the
disabledattribute
More Examples
Explore more ways to style and organize W3.CSS buttons.
Button Padding
Use padding classes to change the space inside a button.
Example
<button class="w3-button w3-padding-small">Small Padding</button>
<button class="w3-button">Normal Padding</button>
<button class="w3-button w3-padding-large">Large Padding</button>
Try it Yourself »
Button Bars
Use w3-bar to group buttons together.
Example
<div class="w3-bar">
<button class="w3-button w3-black">Home</button>
<button class="w3-button w3-teal">News</button>
<button class="w3-button w3-red">Contact</button>
</div>
Try it Yourself »
Use w3-bar and w3-bar-item to group buttons together.
Example
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Home</button>
<button class="w3-bar-item w3-button w3-black">News</button>
<button class="w3-bar-item w3-button w3-black">Contact</button>
</div>
Try it Yourself »
Ripple Buttons
The w3-ripple class adds a ripple effect (when a button is clicked).
Example
<button class="w3-button w3-black w3-ripple">Click Me</button>
<button class="w3-button w3-red w3-ripple">Click Me</button>
Try it Yourself »
Circular Buttons
Combine w3-button with w3-circle to create circular buttons.
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-green">+</button>
Try it Yourself »
Buttons With Text Effects
Buttons can use text effects:
The w3-wide class adds a wider text effect:
Example
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Buttons can have italic and bold text effects:
Use standard HTML tags (<i> and <b>) to add italic or bold effect to the button text:
Example
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Navigation Bars
Button bars can easily be used as navigation bars:
Example
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
The size of each item can be defined by using style="width:":
Example
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
You will learn more about navigation later in this tutorial.
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
