W3.CSS Buttons
Buttons
With W3.CSS, all HTML elements can be buttons.
But the most common elements are <input>, <button>, and <a>:
Example
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3schools.com">Link Button</a>
Try It Yourself »
Button Colors
Buttons come in all the colors you need:
Example
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn
w3-yellow">Yellow</button>
<button class="w3-btn
w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>
Try It Yourself »
Hover Colors
Hover effects come in all the colors you need:
Example
<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn
w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button>
Try It Yourself »
Button Shapes
Buttons come in all the shapes you need:
Example
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-round">Round</button>
<button class="w3-btn
w3-round-large">Rounder</button>
<button class="w3-btn
w3-round-xlarge">and Rounder</button>
<button class="w3-btn
w3-round-xxlarge">and Rounder</button>
Try It Yourself »
Button Sizes
Buttons come in all the sizes you need:
Example
<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn
w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
Try It Yourself »
Button Borders
Buttons can have borders.
Example
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue
w3-round">Button</button>
Try It Yourself »
Buttons with Text Effects
Buttons can have italic and bold text effects.
Example
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Try It Yourself »
Buttons can have shadow text effects.
Example
<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button
class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button
class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
Try It Yourself »
Buttons can have slim and wide text effects.
Example
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Try It Yourself »
Full-width Buttons
To create a full-width button, add the w3-btn-block class to an element.
Full-width buttons have a width of 100%, and spans the entire width of the parent element:
Example
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block
w3-teal">Button</button>
<button class="w3-btn-block
w3-red w3-left-align">Button</button>
Try It Yourself »
Hover Effects / Disabled Buttons
Buttons stands out when you mouse over them.
Normal buttons display a finger pointer.
Disabled buttons are opaque and display a "no parking sign".
Example
<button class="w3-btn">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
<input type="button"
class="w3-btn" value="Button">
<input type="button" class="w3-btn"
value="Button" disabled>
Try It Yourself »
Button Groups
Buttons can be grouped together (without space in between) using "w3-btn-group":
Example
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn"
disabled>Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn w3-light-grey"
style="width:33.3%">One</button>
<button class="w3-btn
w3-light-grey" style="width:33.3%">Two</button>
<button
class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
Try It Yourself »
Buttons with Ripple Effects
Buttons can have ripple effects when they are clicked on:
Example
<button class="w3-btn w3-ripple">Button</button>
<button
class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn
w3-ripple w3-yellow">Button</button>
Try It Yourself »
Button Elements
With W3.CSS, all elements can be a button.
A picture can be a button
Any div, header, footer or other containers can be a button.
Floating Buttons
The w3-btn-floating class, creates circular buttons that are meant for important functions:
Example
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Try It Yourself »
Use the w3-btn-floating-large class for large floating buttons:
Example
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Try It Yourself »
