Scribd
Upload
438 views11 pages

CSS Buttons

The document discusses various ways to style buttons using CSS, including: 1) Changing button colors, sizes, padding, and borders. 2) Adding rounded corners and shadows to buttons. 3) Creating hover and disabled button effects. 4) Adjusting button width and grouping buttons horizontally or vertically. 5) Adding animated effects like arrows, pressed states, and ripples.

Uploaded by

Adnan Bayu Aji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
438 views11 pages

CSS Buttons

The document discusses various ways to style buttons using CSS, including: 1) Changing button colors, sizes, padding, and borders. 2) Adding rounded corners and shadows to buttons. 3) Creating hover and disabled button effects. 4) Adjusting button width and grouping buttons horizontally or vertically. 5) Adding animated effects like arrows, pressed states, and ripples.

Uploaded by

Adnan Bayu Aji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

8/9/2017 CSS Buttons

w3schools.com

  HTML CSS MORE  

CSS Buttons
❮ Previous Next ❯

Learn how to style buttons using CSS.

Basic Button Styling

Default Button CSS Button

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
https://www.w3schools.com/css/css3_buttons.asp 1/11
8/9/2017 CSS Buttons

Green Blue Red Gray Black

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

10px 12px 16px 20px 24px

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 »

https://www.w3schools.com/css/css3_buttons.asp 2/11
8/9/2017 CSS Buttons

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

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

2px 4px 8px 12px 50%

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 »

https://www.w3schools.com/css/css3_buttons.asp 3/11
8/9/2017 CSS Buttons

Colored Button Borders

Green Blue Red Gray Black

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

Green Blue Red Grey Black

Green Blue Red Grey Black

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 {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;

https://www.w3schools.com/css/css3_buttons.asp 4/11
8/9/2017 CSS Buttons

.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...

Try it Yourself »

Shadow Buttons

Shadow Button Shadow on hover

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

Normal Button Disabled Button

https://www.w3schools.com/css/css3_buttons.asp 5/11
8/9/2017 CSS 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

.disabled {
opacity: 0.6;
cursor: not-allowed;
}

Try it Yourself »

Button Width

250px

50%

100%

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 »

https://www.w3schools.com/css/css3_buttons.asp 6/11
8/9/2017 CSS Buttons

Button Groups
Button Button Button Button

Remove margins and add float:left to each button to create a button group:

Example

.button {
float: left;
}

Try it Yourself »

Bordered Button Groups


Button Button Button Button

Use the border property to create a bordered button group:

Example

.button {
float: left;
border: 1px solid green;
}

Try it Yourself »

Vertical Button Groups


Button

https://www.w3schools.com/css/css3_buttons.asp 7/11
8/9/2017 CSS Buttons

Button

Button

Button

Use display:block instead of float:left to group the buttons below each other, instead of
side by side:

Example

.button {
display: block;
}

Try it Yourself »

Animated Buttons

Example
Add an arrow on hover:

Hover

Try it Yourself »

Example
Add a "pressed" effect on click:

https://www.w3schools.com/css/css3_buttons.asp 8/11
8/9/2017 CSS Buttons

Click

Try it Yourself »

Example
Add a "ripple" effect on click:

Click

Try it Yourself »

❮ Previous Next ❯

COLOR PICKER

LEARN MORE
Tabs
Dropdowns
Accordions
Convert Weights
Animated Buttons
Side Navigation
Top Navigation

https://www.w3schools.com/css/css3_buttons.asp 9/11
8/9/2017 CSS Buttons

JS Animations
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Loaders
Tooltips
Slideshow
Filter List
Sort List

SHARE

  

CERTIFICATES
HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.

Read More »

REPORT ERROR
PRINT PAGE
FORUM
ABOUT

Top 10 Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP Tutorial
jQuery Tutorial
Angular Tutorial
XML Tutorial

https://www.w3schools.com/css/css3_buttons.asp 10/11
8/9/2017 CSS Buttons

Top 10 References
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
PHP Reference
HTML Colors
HTML Character Sets
jQuery Reference
AngularJS Reference

Top 10 Examples
HTML Examples
CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples
PHP Examples
ASP Examples
jQuery Examples
Angular Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic
understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full
correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy
policy. Copyright 1999-2017 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

https://www.w3schools.com/css/css3_buttons.asp 11/11

You might also like