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:
<!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:
<!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:
<!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:
<!DOCTYPE html> < html >
< head >
<!-- Title of the page -->
< title >GeeksForGeeks</ title >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet"
</ 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:
<!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:
<!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:
<!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:
<!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: