Open In App

W3.CSS Button

Improve
Improve
Like Article
Like
Save
Share
Report

W3.CSS provides different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. W3.CSS also provides classes that can be used for changing the colour and size of buttons. W3.CSS contains many classes to set the style of the button element. The list of button classes are given below:

Sr. No.

Class Name

Description

1.

w3-btn

A regular rectangular button which produces a black shadow on hover.

2.

w3-button

A regular rectangular button which changes the background colour of the button to grey on hover.

3.

w3-block

It is used for creating full-width buttons.

4.

w3-circle

It is used to create circular buttons.

5.

w3-ripple

It is used to create ripple effects on buttons.

Implementation of buttons with hover effects are as follows:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
    <!-- w3-container is used to add
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
          of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text 
  
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Button With Hover Effect in W3.CSS -->
    <div class="w3-container">
  
        <!-- Button with background hover effect -->
        <h3 class="w3-text-blue">
            Button With Background Hover Effect:
        </h3>
        <input class="w3-button w3-teal" 
            type="button" value="Button">
  
        <!-- Button with shadow hover effect -->
        <h3 class="w3-text-blue">
            Button With Shadow Hover Effect:
        </h3>
        <input class="w3-btn w3-teal" 
            type="button" value="Button">
    </div>
</body>
  
</html>


Output:

Note: The <a>, <button> and <input> elements are used to hold the button classes.

Colored Buttons: You can also add font and background colors to the text by using color classes of W3.CSS. You can also add hover colors to the buttons.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
    <style>
        .w3-button {
            width: 130px;
        }
    </style>
</head>
  
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Button With Different Colours in W3.CSS -->
    <div class="w3-container">
  
        <!-- Button with various background colours -->
        <p class="w3-bar">
            <button class="w3-button w3-red">
                Red
            </button>
            <button class="w3-button w3-light-blue">
                Light Blue
            </button>
            <button class="w3-button w3-lime">
                Lime
            </button>
            <button class="w3-button w3-deep-orange">
                D.Orange
            </button>
        </p>
  
        <p class="w3-bar">
            <button class="w3-button w3-pink">
                Pink
            </button>
            <button class="w3-button w3-cyan">
                Cyan
            </button>
            <button class="w3-button w3-sand">
                Sand
            </button>
            <button class="w3-button w3-brown">
                Brown
            </button>
        </p>
  
        <p class="w3-bar">
            <button class="w3-button w3-purple">
                Purple
            </button>
            <button class="w3-button w3-aqua">
                Aqua
            </button>
            <button class="w3-button w3-khaki">
                Khaki
            </button>
            <button class="w3-button w3-blue-grey">
                Blue Grey
            </button>
        </p>
  
        <p class="w3-bar">
            <button class="w3-button w3-deep-purple">
                D.Purple
            </button>
            <button class="w3-button w3-teal">
                Teal
            </button>
            <button class="w3-button w3-yellow">
                Yellow
            </button>
            <button class="w3-button w3-light-grey">
                Light Grey
            </button>
        </p>
  
        <p class="w3-bar">
            <button class="w3-button w3-indigo">
                Indigo
            </button>
            <button class="w3-button w3-green">
                Green
            </button>
            <button class="w3-button w3-amber">
                Amber
            </button>
            <button class="w3-button w3-grey">
                Grey
            </button>
        </p>
  
        <p class="w3-bar">
            <button class="w3-button w3-blue">
                Blue
            </button>
            <button class="w3-button w3-light-green">
                Light Green
            </button>
            <button class="w3-button w3-orange">
                Orange
            </button>
            <button class="w3-button w3-dark-grey">
                Dark Grey
            </button>
        </p>
    </div>
</body>
  
</html>


Output:

Circular Buttons: The w3-circle class of W3.CSS can be used to circular buttons on a webpage.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Circular Button With Different 
        Colours in W3.CSS -->
    <div class="w3-container">
  
        <!-- Circular Button with various 
            background colours -->
        <h3>Circular Buttons:</h3>
        <button class="w3-button w3-large 
            w3-circle w3-purple">G
        </button>
        <button class="w3-button w3-large 
            w3-circle w3-deep-orange">F
        </button>
        <button class="w3-button w3-large 
            w3-circle w3-blue">G
        </button>
    </div>
</body>
  
</html>


Output:

Ripple Effect: You can add a ripple effect to the buttons by using the w3-ripple class of the W3.CSS. Ripple effect is a part of the modern design trend. You have seen it on many websites specially on Google’s material design language. It gives a button pressing effect.

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
   
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
       
</head>
<body>
    <!-- w3-container is used to add 
        16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content
        of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
       
    <!-- Button with ripple effect in W3.CSS -->
    <div class="w3-container">
           
        <!-- Button with ripple effect -->
        <h3 class="w3-text-blue">Button With Ripple Effect:</h3>
        <div class="w3-center">
            <button class="w3-button w3-ripple w3-large w3-purple">
                Enter GFG
            </button>
        </div>
    </div>
</body>
</html>


Output:

Round Buttons: One can use W3.CSS round classes to create round edged buttons for the web pages.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
  
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Button with Round Borders in W3.CSS -->
    <div class="w3-container">
  
        <!-- Button with round borders -->
        <h3 class="w3-text-blue">
            Button With Round Borders:
        </h3>
          
        <button class="w3-button w3-ripple 
            w3-large w3-purple">
            Normal Button
        </button><br><br>
  
        <button class="w3-round w3-button 
            w3-ripple w3-large w3-purple">
            w3-round Button
        </button><br><br>
  
        <button class="w3-round-large w3-button 
            w3-ripple w3-large w3-purple">
            w3-round-large Button
        </button><br><br>
  
        <button class="w3-round-xlarge w3-button 
            w3-ripple w3-large w3-purple">
            w3-round-xlarge Button
        </button><br><br>
  
        <button class="w3-round-xxlarge w3-button 
            w3-ripple w3-large w3-purple">
            w3-round-xxlarge Button
        </button>
    </div>
</body>
  
</html>


Output:

Button Sizes: W3.CSS provides different classes that allow to changing the size of the button. The .w3-small and .w3-jumbo classes are used for large and small buttons.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
    <!-- w3-container is used to add 
        16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
        content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Button with various sizes in W3.CSS -->
    <div class="w3-container">
  
        <!-- Button with various sizes -->
        <h3 class="w3-text-blue">
            Button With Various Sizes:
        </h3>
          
        <button class="w3-small w3-button w3-purple">
            w3-small Button
        </button><br><br>
          
        <button class="w3-large w3-button w3-purple">
            w3-large Button
        </button><br><br>
          
        <button class="w3-xxlarge w3-button w3-purple">
            w3-xxlarge Button
        </button><br><br>
          
        <button class="w3-jumbo w3-button w3-purple">
            w3-jumbo Button
        </button>
    </div>
</body>
  
</html>


Output:

Disabled State Buttons: The disabled attribute is used with <button> element to set the disabled state of the button.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
  
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content
        of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Button with disabled state in W3.CSS -->
    <div class="w3-container">
  
        <!-- Button with disabled state -->
        <h3 class="w3-text-blue">
            Button With Disabled State:
        </h3>
          
        <button class="w3-button w3-green w3-round">
           Active Button
        </button>
  
        <button class="w3-button w3-blue w3-round" 
            disabled>
            Disabled Button
        </button>
    </div>
</body>
  
</html>


Output:

Block Level Buttons: The .w3-block class of W3.CSS is used to create a block-level button which takes all width of the parent element.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Block Button in W3.CSS -->
    <div class="w3-container">
  
        <!-- Block Button -->
        <h3 class="w3-text-blue">
            Block Level Button:
        </h3>
          
        <button class="w3-button w3-block 
            w3-green w3-round">
           Block Button
        </button>
    </div>
</body>
  
</html>


Output:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads