W3.CSS Buttons

Toggle navigation
TUTORIAL HOME
W3.CSS Buttons
❮ Previous Next ❯
Button ButtonButton ButtonButton ButtonDisabled
Button Button Button ButtonButton Button Disabled
Button ButtonButton ButtonButton ShadowButton
+ + +
Button1 Button2 Button3
Button Button
W3.CSS Button Classes
W3.CSS provides the following classes for buttons:

Class Defines
w3-btn A rectangular button with a shadow hover effect.
Default color is black.
w3-button A rectangular button with a gray hover effect.
Default color is light-gray.
w3-bar A horizontal bar that can be used to group buttons together.
(Perfect for horizontal navigation menus)
w3-block Class that can be used to define a full width (100%) button.
w3-circle Can be used to define a circular button.
w3-ripple Can be used to create a ripple effect.
Buttons
Both the w3-button class and the w3-btn class add button-behavior to any HTML elements.

The most common elements to use are <input type="button">, <button>, and <a>:

Example
<input class="w3-button" type="button" value="Input Button">
<button class="w3-button">Button Button</button>
<a href="https://www.Omegas.com" class="w3-button">Link Button</a>

<input class="w3-btn" type="button" value="Input Button">
<button class="w3-btn">Button Button</button>
<a href="https://www.Omegas.com" class="w3-btn">Link Button</a>
»

Button Colors
Black Khaki Yellow RedPurple Aqua Blue IndigoGreen Teal

All the w3-color classes is used to add color to buttons:

Example
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>

<button class="w3-btn w3-black">Black</button>
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>
»

Hover Colors
Hover effects also come in all colors. Here are some:

Black Red Purple Aqua BlueGreen Teal

White Red PurpleAqua Blue GreenTeal

The w3-hover-color classes is used to add hover color to buttons:

Example
<button class="w3-button w3-hover-khaki">Khaki</button>
<button class="w3-button w3-hover-white">White</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>

<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>
»

Button Shapes
Normal Round Rounderand Rounder and Rounder

Normal RoundRounder and Rounderand Rounder

The w3-round-size classes are used to add rounded borders to buttons:

Example
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</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>
»
Button Sizes
Tiny Small Medium LargeXLarge

Tiny Small MediumLarge XLarge

The w3-size classes can be used to define different text sizes:

Example
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
»

Button Borders
Button Button Button Button

Button ButtonButton Button

The w3-border class can be used to add borders to buttons.

The w3-border-color classes are used to define the color of the border:

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-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
»

Tip: Add the w3-round-size class to add rounded borders.

Buttons With Different Text Effects
Buttons can use a wider text effects:

Normal Wide

Normal Wide

The w3-wide class adds a wider text effect:

Example
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-wide">Wide</button>
»

Buttons can have italic and bold text effects:

Normal Italic Bold

Normal Italic Bold

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>

<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
»

Buttons With Padding
Button Button Button

Button ButtonButton

The w3-padding-size classes is used to add extra padding around the button text:

Example
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>

<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
»

Full-width Buttons
To create a full-width button, add the w3-block class to the button.

Full-width buttons have a width of 100%, and spans the entire width of the parent element:

Button

Button

Button

Button

Button

Button

Example
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>

<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
»

Tip: Align the button text with the w3-left-align class or the w3-right-align class.

The size of the a block can be defined using style="width:".

Button Button Button

Example
<button class="w3-button w3-block w3-black" style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
»

Disabled Buttons
Buttons stand out with a shadow effect and the cursor turns into a hand when mousing over them.

Disabled buttons are opaque (semi-transparent) and display a "no parking sign":

Button Disabled ButtonDisabled

Button DisabledButton Disabled

The w3-disabled class is used to create a disabled button (if the element support the standard HTML disabled attribute, you can use the disabled attribute instead):

Example
<a class="w3-button w3-disabled" href="https://www.Omegas.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>

<a class="w3-btn w3-disabled" href="https://www.Omegas.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
»

Button Bars
Buttons can be grouped together in a horizontal bar using the w3-bar class:

Button Button Button
Example
<div class="w3-bar">
  <button class="w3-button w3-black">Button</button>
  <button class="w3-button w3-teal">Button</button>
  <button class="w3-button w3-red">Button</button>
</div>
»

The w3-bar class was introduced in W3.CSS version 2.93 / 2.94.

Buttons can be grouped together without a space between them by using w3-bar-item class:

Button Button Button
Example
<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-black">Button</button>
  <button class="w3-bar-item w3-button w3-teal">Button</button>
  <button class="w3-bar-item w3-button w3-red">Button</button>
</div>
»

Buttons bars can be centered using the w3-center class:

Button Button Button
Example
<div class="w3-center">
<div class="w3-bar">
  <button class="w3-button w3-black">Button</button>
  <button class="w3-button w3-teal">Button</button>
  <button class="w3-button w3-disabled">Button</button>
</div>
</div>
»

To show two (or more) button bars on the same line, add the w3-show-inline-block  class:

Button Button Button
Button Button Button
Example
<div class="w3-show-inline-block">
<div class="w3-bar">
  <button class="w3-btn">Button</button>
  <button class="w3-btn w3-teal">Button</button>
  <button class="w3-btn w3-disabled">Button</button>
</div>
</div>

<div class="w3-show-inline-block">
<div class="w3-bar">
  <button class="w3-btn">Button</button>
  <button class="w3-btn w3-teal">Button</button>
  <button class="w3-btn w3-disabled">Button</button>
</div>
</div>
»

Navigation Bars
Button bars can easily be used as navigation bars:

Button Button Button

Button Button Button

Button Button Button

Button Button Button
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 items can be defined by using style="width:":

Button Button Button
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.

Left and Right Buttons
Use the .w3-left class and the .w3-right  class to float buttons to the left or to the right:

Left Right
Used to create "previous/next" buttons:

« Previous Next »
Example
<div class="w3-bar">
  <button class="w3-button w3-left">Left</button>
  <button class="w3-button w3-right">Right</button>
</div>
»

Buttons With Ripple Effects
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):

Button Button Button

Button ButtonButton

Example
<button class="w3-button w3-ripple">Button</button>
<button class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button w3-ripple w3-yellow">Button</button>
»

All Elements Can Be Buttons
With W3.CSS, all elements can be a button:

A picture can be a w3-button

A picture can be a w3-btn


Any div, header, footer or other containers can be a w3-button!



Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:

+ +

Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
»

Square buttons:

+ +

Example
<button class="w3-button w3-black">+</button>
<button class="w3-button w3-teal">+</button>
»


❮ Previous Next ❯