- How TO — Text Buttons
- Example
- Text Buttons with Individual Backgrounds
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- CSS Buttons
- Example
- Button Sizes
- Example
- Example
- Rounded Buttons
- Example
- Colored Button Borders
- Example
- Hoverable Buttons
- Example
- Shadow Buttons
- Example
- Disabled Buttons
- Example
- Button Width
- Example
- Button Groups
- Example
- Bordered Button Group
- Example
- Vertical Button Group
- Example
- Button on Image
- Animated Buttons
- Example
- Example
- Example
- Example
- HTML Tag
- Browser Support
- Attributes
- Global Attributes
- Event Attributes
- More Examples
- Example
- Example
- Related Pages
How TO — Text Buttons
To get the «text button» look, we remove the default background color and border:
Example
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
Text Buttons with Individual Backgrounds
Text buttons with a specific background color on hover:
Example
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
.success:hover background-color: #04AA6D;
color: white;
>
.info:hover background: #2196F3;
color: white;
>
.warning:hover background: #ff9800;
color: white;
>
.danger:hover background: #f44336;
color: white;
>
.default:hover background: #e7e7e7;
>
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS Buttons
Use the background-color property to change the background color of a button:
Example
Button Sizes
Use the font-size property to change the font size of a button:
Example
Use the padding property to change the padding of a button:
10px 24px 12px 28px 14px 40px 32px 16px 16px
Example
.button1
.button2
.button3
.button4
.button5
Rounded Buttons
Use the border-radius property to add rounded corners to a button:
Example
Colored Button Borders
Use the border property to add a colored border to a button:
Example
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;
>
.
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);
>
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:
Example
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
Button Groups
Remove margins and add float:left to each button to create a button group:
Example
Bordered Button Group
Use the border property to create a bordered button group:
Example
Vertical Button Group
Use display:block instead of float:left to group the buttons below each other, instead of side by side:
Example
Button on Image
Button
Animated Buttons
Example
Example
Add a «pressed» effect on click:
Example
Example
Add a «ripple» effect on click:
HTML Tag
Inside a element you can put text (and tags like , , ,
, , etc.). That is not possible with a button created with the element!
Tip: Always specify the type attribute for a element, to tell browsers what type of button it is.
Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
Browser Support
Attributes
Attribute | Value | Description |
---|---|---|
autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
disabled | disabled | Specifies that a button should be disabled |
form | form_id | Specifies which form the button belongs to |
formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type=»submit» |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how form-data should be encoded before sending it to a server. Only for type=»submit» |
formmethod | get post | Specifies how to send the form-data (which HTTP method to use). Only for type=»submit» |
formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type=»submit» |
formtarget | _blank _self _parent _top framename | Specifies where to display the response after submitting the form. Only for type=»submit» |
name | name | Specifies a name for the button |
type | button reset submit | Specifies the type of button |
value | text | Specifies an initial value for the button |
Global Attributes
Event Attributes
More Examples
Example
.button border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
>
!DOCTYPE>
Example
Use CSS to style buttons (with hover effect):
.button border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
>
!DOCTYPE>
.button1 background-color: white;
color: black;
border: 2px solid #4CAF50;
>
.button1:hover background-color: #4CAF50;
color: white;
>
.button2 background-color: white;
color: black;
border: 2px solid #008CBA;
>
.button2:hover background-color: #008CBA;
color: white;
>