Learn how to style buttons using CSS.
Basic Button Styling
Example
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Try it Yourself »
Button Colors
Use the background-color
property to change the background color of a button:
Example
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Try it Yourself »
Button Sizes
Use the font-size
property to change the font size of a button:
Example
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Try it Yourself »
Use the padding
property to change the padding of a button:
Example
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Try it Yourself »
Rounded Buttons
Use the border-radius
property to add rounded corners to a button:
Example
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Try it Yourself »
Colored Button Borders
Use the border
property to add a colored border to a button:
Example
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Try it Yourself »
Hoverable Buttons
Use the :hover
selector to change the style of a button when you move the mouse over it.
Tip: Use
the transition-duration
property to determine the speed of the "hover" effect:
Example
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Try it Yourself »
Shadow Buttons
Use the box-shadow
property to add shadows to a button:
Example
.button1 {
box-shadow: 0 8px 16px 0 rgba[0,0,0,0.2], 0 6px 20px 0 rgba[0,0,0,0.19];
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba[0,0,0,0.24], 0 17px 50px 0 rgba[0,0,0,0.19];
}
Try it Yourself »
Disabled Buttons
Use the opacity
property to add transparency to a button [creates a "disabled"
look].
Tip: You can also add the cursor
property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:
Button Width
By default, the size of the button is determined by its text content [as wide as its content]. Use the width
property to change the width of a button:
Example
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Try it Yourself »
Button Groups
Remove margins and add float:left
to each button to create a button group:
Bordered Button Group
Use the border
property to create a bordered button group:
Vertical Button Group
Use display:block
instead of float:left
to group the buttons below each other, instead of side by side:
Button on Image
Link Button
Button Button
Link Button
Try It Yourself »
Button Colors
All the w3-color classes is used to add color to buttons:
Example
Black
Khaki
Yellow
Red
Purple
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
Black
Red
Purple
Try It Yourself »
Button Shapes
The w3-round-size classes are used to add rounded borders to buttons:
Example
Round
Rounder
and Rounder
and Rounder
Round
Rounder
and Rounder
and Rounder
Try It Yourself »
Button Sizes
The w3-size classes can be used to define different text sizes:
Example
Tiny
Small
Medium
Large
xLarge
XXLarge
XXXLarge
Jumbo
Try It Yourself »
Button Borders
The w3-border class can be used to add borders to buttons.
The w3-border-colorclasses are used to define the color of the border:
Example
Button
Button
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
Normal
Wide
Try It Yourself »
Buttons can have italic and bold text effects:
Use standard HTML tags [ and ] to add italic or bold effect to the button text:
Example
Italic
Bold
Try It Yourself »
Buttons With Padding
The w3-padding-size classes is used to add extra padding around the button text:
Example
Button
Button
Button
Button
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
Button
Button
Button
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
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
Link
Button
Button
Link Button
Button
Try It Yourself »
Button Bars
Buttons can be grouped together in a horizontal bar using the w3-bar class:
Example
Button
Button
Button
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
Button
Button
Button
Try It Yourself »
Buttons bars can be centered using the w3-center class:
Example
Button
Button
Button
Try It Yourself »
To show two [or more] button bars on the same line, add the w3-show-inline-block class:
Example
Button
Button
Button
Button
Button
Button
Try It Yourself »
Navigation Bars
Button bars can easily be used as navigation bars:
Example
Button
Button
Button
Try It Yourself »
The size of each items can be defined by using style="width:":
Example
Button
Button
Button
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
Left
Right
Try It Yourself »
Buttons With Ripple Effects
The w3-ripple class creates a ripple effect on buttons [when they are clicked on]:
Example
Button
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
+
+
Try It Yourself »
Square buttons:
+ +
Example
+
+
Try It Yourself »