W3.CSS — Buttons

Basic Button

<button class="w3-button w3-black">Black Button</button>
<button class="w3-button w3-blue">Blue Button</button>
<button class="w3-button w3-green">Green Button</button>

Button Colors

<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-pink">Pink</button>
<button class="w3-button w3-purple">Purple</button>
<button class="w3-button w3-deep-purple">Deep Purple</button>
<button class="w3-button w3-indigo">Indigo</button>
<button class="w3-button w3-blue">Blue</button>
<button class="w3-button w3-light-blue">Light Blue</button>
<button class="w3-button w3-cyan">Cyan</button>
<button class="w3-button w3-teal">Teal</button>
<button class="w3-button w3-green">Green</button>
<button class="w3-button w3-light-green">Light Green</button>
<button class="w3-button w3-lime">Lime</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-amber">Amber</button>
<button class="w3-button w3-orange">Orange</button>
<button class="w3-button w3-deep-orange">Deep Orange</button>
<button class="w3-button w3-brown">Brown</button>
<button class="w3-button w3-grey">Grey</button>
<button class="w3-button w3-blue-grey">Blue Grey</button>
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-white w3-border">White</button>

Button Sizes

<button class="w3-button w3-blue w3-small">Small</button>
<button class="w3-button w3-blue w3-medium">Medium</button>
<button class="w3-button w3-blue w3-large">Large</button>

Button Styles

<!-- Round button -->
<button class="w3-button w3-blue w3-round">Round</button>

<!-- Circle button -->
<button class="w3-button w3-blue w3-circle w3-large">+</button>

<!-- Block button -->
<button class="w3-button w3-blue w3-block">Block Button</button>

<!-- Disabled button -->
<button class="w3-button w3-blue w3-disabled">Disabled</button>

Hover Effects

<button class="w3-button w3-red w3-hover-orange">Red to Orange</button>
<button class="w3-button w3-blue w3-hover-green">Blue to Green</button>
<button class="w3-button w3-green w3-hover-red">Green to Red</button>

Button Group

<div class="w3-bar">
    <button class="w3-bar-item w3-button w3-blue">Left</button>
    <button class="w3-bar-item w3-button w3-blue">Center</button>
    <button class="w3-bar-item w3-button w3-blue">Right</button>
</div>

Link Buttons

<a href="#" class="w3-button w3-blue">Link Button</a>
<a href="#" class="w3-button w3-green w3-round">Round Link</a>

Mini Practice

Create HTML code that:

1. Creates buttons with different colors
2. Adds hover effects
3. Creates a button group
4. Uses different button sizes

Up Next

Next: Learn about W3.CSS Badges.