Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Buttons


+ + +

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

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 w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" 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="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>

Try It Yourself »



Button Colors

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>

Try It Yourself »


Hover Colors

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

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

Example

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

Try It Yourself »


Button Shapes

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>
Try It Yourself »

Button Sizes

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>

Try It Yourself »


Button Borders

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>

Try It Yourself »

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


Buttons With Different Text Effects

Buttons can use a wider text effects:

The w3-wide class adds a wider text effect:

Example

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

Try It Yourself »

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:

Example

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

Try It Yourself »


Buttons With Padding

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>

Try It Yourself »


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:

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>

Try It Yourself »

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:".

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>

Try It Yourself »


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":

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.w3schools.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.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>

Try It Yourself »


Button Bars

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

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>

Try It Yourself »

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:

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>

Try It Yourself »

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

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>

Try It Yourself »

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

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>

Try It Yourself »


Navigation Bars

Button bars can easily be used as navigation bars:




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>

Try It Yourself »

The size of each items can be defined by using style="width:":

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>

Try It Yourself »

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:

Used to create "previous/next" buttons:

Example

<div class="w3-bar">
  <button class="w3-button w3-left">Left</button>
  <button class="w3-button w3-right">Right</button>
</div>

Try It Yourself »


Buttons With Ripple Effects

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

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>

Try It Yourself »


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>

Try It Yourself »

Square buttons:

+ +

Example

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

Try It Yourself »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.