Introduction
This chapter demonstrates about the W3CSS Buttons these are the important components of the web page following are the concepts covered in this chapter.
- Buttons and Its Classes
- Different states of Buttons
Description
User can also use the buttons in W3.CSS by using the w3-btn class these buttons can be added to any of the HTML element in which most common elements are the <input type="button">, <button>, and <a>. The code below demonstrates the Buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Buttons</h2>
<input type="button" class="w3-btn" value="Input Button">
<button class="w3-btn">splessons Button</button>
<a class="w3-btn" href="#">Link Button</a>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
W3.CSS buttons have some classes in order to define the buttons these classes are tabulated below.
| Class | Description |
|---|---|
| w3-btn | Which is the rectangular button. |
| w3-btn-floating | Which is the circular floating button. |
| w3-btn-floting-large | Which is the large circular button. |
| w3-btn-bar | These are the button bars. |
| w3-btn-group | Which is the group of buttons. |
| w3-btn-clock | These are the full-width buttons. |
| w3-ripple | Which gives a ripple effect. |
Description
W3.CSS have the different states of buttons and which have the several properties in which some properties are demonstrated below.
Colored Button
User can add the colors to the button based on the requirement by using the w3-color. The code below demonstrates to adding the colors to the buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-btn {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Button Colors</h2>
<p><button class="w3-btn w3-red">Red Color</button></p>
<p><button class="w3-btn w3-pink">Pink Color</button></p>
<p><button class="w3-btn w3-purple">Purple Color</button></p>
<p><button class="w3-btn w3-deep-purple">Deep Purple Color</button></p>
<p><button class="w3-btn w3-indigo">Indigo Color</button></p>
<p><button class="w3-btn w3-blue">Blue Color</button></p>
<p><button class="w3-btn w3-light-blue">Light Blue Color</button></p>
<p><button class="w3-btn w3-cyan">Cyan Color</button></p>
<p><button class="w3-btn w3-aqua">Aqua Color</button></p>
<p><button class="w3-btn w3-teal">Teal Color</button></p>
<p><button class="w3-btn w3-green">Green Color</button></p>
<p><button class="w3-btn w3-light-green">Light Green Color</button></p>
<p><button class="w3-btn w3-lime">Lime Color</button></p>
<p><button class="w3-btn w3-sand">Sand Color</button></p>
<p><button class="w3-btn w3-khaki">Khaki Color</button></p>
<p><button class="w3-btn w3-yellow">Yellow Color</button></p>
<p><button class="w3-btn w3-amber">Amber Color</button></p>
<p><button class="w3-btn w3-orange">Orange Color</button></p>
<p><button class="w3-btn w3-deep-orange">Deep Orange Color</button></p>
<p><button class="w3-btn w3-brown">Brown Color</button></p>
<p><button class="w3-btn w3-blue-grey">Blue Grey Color</button></p>
<p><button class="w3-btn w3-light-grey">Light Grey Color</button></p>
<p><button class="w3-btn w3-grey">Grey Color</button></p>
<p><button class="w3-btn w3-dark-grey">Dark Grey Color</button></p>
<p><button class="w3-btn w3-black">Black Color</button></p>
<p><button class="w3-btn w3-pale-red">Pale-red Color</button></p>
<p><button class="w3-btn w3-pale-yellow">Pale-yellow Color</button></p>
<p><button class="w3-btn w3-pale-green">Pale-green Color</button></p>
<p><button class="w3-btn w3-pale-blue">Pale-blue Color</button></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hover Colors
In W3.CSS user can get the hover colors to the button by using the w3-hover-class. The code below demonstrates adding hover colors to the buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-btn {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Hover Colors</h2>
<p>Hover over the buttons to see the effect:</p>
<p><button class="w3-btn w3-hover-red">Red Color</button></p>
<p><button class="w3-btn w3-hover-pink">Pink Color</button></p>
<p><button class="w3-btn w3-hover-purple">Purple Color</button></p>
<p><button class="w3-btn w3-hover-deep-purple">Deep Purple Color</button></p>
<p><button class="w3-btn w3-hover-indigo">Indigo Color</button></p>
<p><button class="w3-btn w3-hover-blue">Blue Color</button></p>
<p><button class="w3-btn w3-hover-light-blue">Light Blue Color</button></p>
<p><button class="w3-btn w3-hover-cyan">Cyan Color</button></p>
<p><button class="w3-btn w3-hover-aqua">Aqua Color</button></p>
<p><button class="w3-btn w3-hover-teal">Teal Color</button></p>
<p><button class="w3-btn w3-hover-green">Green Color</button></p>
<p><button class="w3-btn w3-hover-light-green">Light Green Color</button></p>
<p><button class="w3-btn w3-hover-lime">Lime Color</button></p>
<p><button class="w3-btn w3-hover-sand">Sand Color</button></p>
<p><button class="w3-btn w3-hover-khaki">Khaki Color</button></p>
<p><button class="w3-btn w3-hover-yellow">Yellow Color</button></p>
<p><button class="w3-btn w3-hover-amber">Amber Color</button></p>
<p><button class="w3-btn w3-hover-orange">Orange Color</button></p>
<p><button class="w3-btn w3-hover-deep-orange">Deep Orange Color</button></p>
<p><button class="w3-btn w3-hover-brown">Brown Color</button></p>
<p><button class="w3-btn w3-hover-blue-grey">Blue Grey Color</button></p>
<p><button class="w3-btn w3-hover-light-grey">Light Grey Color</button></p>
<p><button class="w3-btn w3-hover-grey">Grey Color</button></p>
<p><button class="w3-btn w3-hover-dark-grey">Dark Grey Color</button></p>
<p><button class="w3-btn w3-hover-black">Black Color</button></p>
<p><button class="w3-btn w3-hover-pale-red">Pale-red Color</button></p>
<p><button class="w3-btn w3-hover-pale-yellow">Pale-yellow Color</button></p>
<p><button class="w3-btn w3-hover-pale-green">Pale-green Color</button></p>
<p><button class="w3-btn w3-hover-pale-blue">Pale-blue Color</button></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Button Sizes
In w3.CSS user will get different size of buttons with different sizes by using the w3-size classes by using user will get different sizes. The code below demonstrates different sizes of buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Button Sizes</h2>
<p><button class="w3-btn w3-tiny">Tiny</button></p>
<p><button class="w3-btn w3-small">Small</button></p>
<p><button class="w3-btn w3-medium">Medium</button></p>
<p><button class="w3-btn w3-large">Large</button></p>
<p><button class="w3-btn w3-xlarge">XLarge</button></p>
<p><button class="w3-btn w3-xxlarge">XXLarge</button></p>
<p><button class="w3-btn w3-xxxlarge">XXXLarge</button></p>
<p><button class="w3-btn w3-jumbo">Jumbo</button></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Button Shapes
In W3.CSS user will get different sizes buttons by using the w3-round-size classes which are used to get the rounded bordered buttons. The code below demonstrates rounded bordered buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-btn {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Button Shapes</h2>
<p><button class="w3-btn">No Round</button></p>
<p><button class="w3-btn w3-round-small">Round Small</button></p>
<p><button class="w3-btn w3-round">Round Normal</button></p>
<p><button class="w3-btn w3-round-large">Round Large</button></p>
<p><button class="w3-btn w3-round-xlarge">Round XLarge</button></p>
<p><button class="w3-btn w3-round-xxlarge">Round XXLarge</button></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Border Buttons
In W3.CSS user will get the different Borders of buttons by using the w3-border class user need to define his own colors as shown below. The code below demonstrates the Border buttons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-btn {margin-bottom:10px;}
</style>
<body>
<div class="w3-container">
<h2>Button Borders</h2>
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round-large">Button</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round-xlarge">Button</button>
<button class="w3-btn w3-white w3-border w3-border-purple w3-round-xlarge">Button</button>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Full width Buttons
User can create a full width button by using the w3-btn-block to an element which have the complete width of 100% and spans the entire width of the parent element.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Full-width Buttons</h2>
<p>A <strong>w3-btn-block</strong> button has a width of 100%, and spans the entire width of the parent element.</p>
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block w3-aqua">Button</button>
<button class="w3-btn-block w3-blue w3-left-align">Button</button>
<p>Different width of parent elements:</p>
<div class="w3-section" style="width:30%">
<button class="w3-btn-block">Button</button>
</div>
<div class="w3-section" style="width:50%">
<button class="w3-btn-block w3-aqua">Button</button>
</div>
<div class="w3-section" style="width:80%">
<button class="w3-btn-block w3-blue w3-right-align">Button</button>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Button Groups
In w3.CSS user can grouped the buttons without spaces by using the w3-btn-group class the code below demonstrates the button groups as shown below.
[/html]
W3.CSS
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Ripple Effects
User will get the ripple effects by using the w3-ripple when user clicked on the buttons. The code below demonstrates the ripple effects as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Buttons with Ripple Effect</h2>
<p>Click on the buttons to see the effect:</p>
<button class="w3-btn w3-ripple">Button</button>
<button class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn w3-ripple w3-aqua">Button</button>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Circular floating Buttons
User can also create the circular floating buttons by using the w3-btn-floating. The code below demonstrates to creating the circular floating buttons.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h2>Floating Buttons</h2>
<a class="w3-btn-floating">+</a>
<a class="w3-btn-floating w3-aqua">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Button Groups
Key Points
- W3.CSS will have the different types of effects.
- Hoverable effects will appear when mouse over on buttons.
- User can also create circular floating buttons.