Predefined Button Styles in W3.CSS
With W3.CSS in existing HTML website webpage, you can create responsive, attractive, and commercial user defined compatible buttons on your webpage and use them anywhere in the webpage form. Where W3.CSS framework provides you many built-in button styles and button utilities for use in webpage. Where these W3.CSS button classes are soft to use and highly user modifiable. Where you can apply effects like button color, button theme, button rounding, button size etc. to your custom button as per the webpage, in the existing webpage anytime.
Common button class in W3.CSS web page.
w3-button in W3.CSS Basic button style.
Button class in W3.CSS is a fundamental built-in button class in w3-button. Where you can apply basic button styles and attributes like button padding, button border, and button font size to create a simple webpage button. Apart from this, you can manually apply many other button classes to modify the created webpage form button appearance and button behaviour etc.
W3.CSS Basic button style example.
<button class=”w3-button”>Simple Button</button>
W3.CSS Button Colors and Themes.
You can modify the default color of a button as per your requirement by applying W3.CSS built-in button classes for multiple color choices to your existing HTML website webpage. Where you can change the background color of a button and the color of the button text with these button classes.
W3.CSS Button Colors and Themes Types.
- w3-blue – This W3.CSS button class changes the existing button color to blue button color.
- w3-green – This w3.css button class changes the current button color to a green button color.
- w3-red – This w3.css button class changes the current button color to a red button color.
- w3-yellow – This w3.css button class changes the current button color to a yellow button color.
- w3-orange – This w3.css button class changes the current button color to an orange button color.
- w3-teal – This w3.css button class changes the current button color to a teal button color.
- w3-pink – This w3.css button class changes the current button color to a pink button color.
- w3-purple – This w3.css button class changes the current button color to a purple button color.
- w3-black – This W3.CSS button class changes the current button color to black button color.
- w3-light-grey – This W3.CSS button class changes the current button color to light grey button color.
- w3-dark-grey – This W3.CSS button class changes the current button color to dark grey button color.
W3.CSS Button Colors and Themes Example.
<button class=”w3-button w3-blue”>Blue Button Example</button>
<button class=”w3-button w3-green”>Green Button Example </button>
<button class=”w3-button w3-red”>Red Button Example </button>
<button class=”w3-button w3-orange”>Orange Button Example </button>
<button class=”w3-button w3-teal”>Teal Button Example </button>
Button Size in W3.CSS.
W3.CSS provides you many button classes to change the size of the button. There are many existing button options to set many button sizes as per your requirement.
Button Size type in W3.CSS.
- w3-small – This W3.CSS button class previews the current button as a small button.
- w3-large – This W3.CSS button class previews the current button as a large button.
- w3-xlarge – This W3.CSS button class previews the existing button as an extra large button.
- w3-xxlarge – This W3.CSS button class previews the existing button as an extra extra large button.
Button Size in W3.CSS Example.
<button class=”w3-button w3-small”>Small Button Example</button>
<button class=”w3-button w3-large”>Large Button Example </button>
<button class=”w3-button w3-xlarge”>Extra Large Button Example </button>
<button class=”w3-button w3-xxlarge”>Double Extra Large Button Example </button>
W3.CSS Rounded Button (w3-round) Class.
To display an existing button in a round style or shape, you can add the w3-round class. This will apply a pie border to your button, causing the existing button’s round corners to be rounded.
W3.CSS Rounded Button (w3-round) type.
- w3-round – This previews all corner borders of the existing form button as rounded.
- w3-round-large – This displays all corners of the existing form button as large round borders.
- w3-round-small – This previews all the corners of the existing form button in small round.
W3.CSS Rounded Button Example.
<button class=”w3-button w3-blue w3-round”>Rounded Button</button>
<button class=”w3-button w3-red w3-round-large”>Large Rounded Button</button>
<button class=”w3-button w3-green w3-round-small”>Small Rounded Button</button>
Button with icon (w3-button w3-icon) class in W3.CSS.
You can display icons in your existing form button in W3.CSS form buttons. Where you can use w3-icon class to add icons to webpage forms from popular icon libraries like Font Awesome or W3.CSS built-in button icons.
Button with icon example.
<!– Using W3.CSS built-in icons class –>
<button class=”w3-button w3-yellow w3-icon w3-left”> <i class=”fa fa-home”></i> Home Page</button>
<!– Using Font Awesome icons (include in your project) –>
<button class=”w3-button w3-red w3-icon w3-left”><i class=”fa fa-search”></i> Now Search </button>
Here you see in this example.
Here w3-icon class previews a button icon in your button.
Where w3-left class previews the button icon in the left direction of the text. Similarly you can also preview this button in the right side with w3-right class.
W3.CSS Floating Button.
If you want to create a floating button for your web page, W3.CSS Floating Button provides you a floating button class that previews in a fixed order on the page when the web visitor scrolls the webpage. You can apply the w3-button w3-floating class to create a floating form button.
W3.CSS Floating Button Example.
<button class=”w3-button w3-red w3-floating w3-xlarge w3-right”>+</button>
Here this floating button will float in the bottom right corner of the webpage. You can modify it by changing the name of the floating button class.
W3.CSS Active and Hover Effects.
W3.CSS provides hover and active button position classes to make W3.CSS buttons in an existing HTML website webpage more interactive and effective.
W3.CSS Active and Hover Effects Attributes.
- w3-hover-opacity – This applies button opacity effect with hover effect to W3.CSS buttons in an existing HTML website webpage.
- w3-active – This immediately highlights the button in a webpage form when W3.CSS clicks or presses it in an existing HTML website webpage.
Button example with hover and active effects.
<button class=”w3-button w3-green w3-hover-opacity”>Click To Hover Me</button>
<button class=”w3-button w3-blue w3-active”>Active Button Example</button>
Here in this example.
- w3-hover-opacity – Here the hover opacity class creates a semi-transparent effect on hovering the button.
- w3-active – This provides active effect to the class button in an existing form button.
W3.CSS Outline Button.
If you want to create a webpage button with an outline style (bordered button but no solid background), you can add the w3-border with a color class.
Outline Button Example.
<button class=”w3-button w3-border w3-purple w3-text-blue”>Display Outline Purple Button</button>
<button class=”w3-button w3-border w3-lime w3-text-red”>Outline Lime Button</button>
Here in this example.
- w3-border – This creates a border around the existing form button.
- w3-text-color – This previews the color of the button text to match the border of the button in the existing form button.
W3.CSS Disabled Button.
To preview a disabled W3.CSS button in an existing HTML website webpage, you can add the w3-disabled button class. This will display the existing button as disabled in the webpage or form and the button will not be enabled or actionable when the web visitor clicks it.
Disabled Button Example.
<button class=”w3-button w3-orange w3-disabled”>Disabled Button Example</button>
Here it will style the button with a default grey color and disable any activity with it.
Predefined button styles for webpage forms in W3.CSS Conclusion.
W3.CSS provides you with a variety of built-in form button styles and utilities using which you can manually customize your web page buttons.
