W3.CSS Buttons

W3.CSS Button Classes

W3.CSS provides the following classes for buttons:

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 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-show-inline-block: To show two (or more) button bars on the same line, use w3-show-inline-block class.
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.
w3-hover-color classes is used to add hover color to buttons.

Button corner: w3-round-size classes (w3-round, w3-round-large, w3-round-xlarge, w3-round-xxlarge) are used to add rounded corners to any elements (not only buttons).
Button size: w3-size classes (w3-tiny, w3-small, w3-medium (default), w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) are used to set font sizes of any element.
Button border: The w3-border class can be used to add borders to any element & w3-border-color classes are used to define the color of the border.
Button with text effect: We can add text effect w3-wide class to any element, (button element also).
Buttons with padding: the w3-padding-size (w3-padding-small, w3-padding-large) classes are also used with button element to add padding within button.
Full-width Buttons: the w3-block class is used to button element to create a full-width button. Full-width buttons have a width of 100%, and spans the entire width of the parent element. However, the size of the a block can be defined using style="width:" also.
Disabled buttons: to create disabled buttons, we use w3-disabled class or disabled tag with the element.
Button Bars: buttons can be grouped together in a horizontal bar (with space between them) using the w3-bar class. Buttons can be grouped together (without a space between them) by using w3-bar-item class. They can be aligned with any text alignment classes like w3-left-align (default), w3-right-align and w3-center

Difference between w3-btn & w3-button classes, disabled buttons, circular & square buttons: View example (27)
Buttons with different colours, hover colours, text effect, padding, border & border color: View example (28)
Buttons of different sizes: View example (29)
Buttons of full width: View example (30)
Buttons grouped together & alignment, two or more button bars are on same line: View example (31)
Buttons can be used to create navigation bars: View example (32)