HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
W3.CSS provides the following classes for buttons
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 in W3.CSS version 3. Default color is inherited from parent element in version 4. |
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. |
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>:
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="/" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="/" class="w3-btn w3-black">Link Button</a>
All the w3-color classes is used to add color to buttons:
<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>
Hover effects also come in all colors. Here are some:
The w3-hover-color classes is used to add hover color to buttons:
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
The w3-round-size classes are used to add rounded borders to buttons:
<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>
The w3-size classes can be used to define different text sizes:
<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>
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:
<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 can use a wider text effects:
The w3-wide class adds a wider text effect:
<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:
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
The w3-padding-size classes is used to add extra padding around the button text:
<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>
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 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 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>
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":
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):
<a class="w3-button w3-disabled" href="/">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="/">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Buttons can be grouped together in a horizontal bar using the w3-bar class:
<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:
<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:
<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:
<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>
Button bars can easily be used as navigation bars:
<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:":
<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.
Use the .w3-left class and the .w3-right class to float buttons to the left or to the right:
Used to create "previous/next" buttons:
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
<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>
With W3.CSS, all elements can be a 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!
The w3-circle class can be used to create circular buttons:
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>