Skip to main content

CSS Buttons

Basic Button Styling​

.button {  
    background-color:  #4CAF50;  /* Green */  
    border:  none;  
    color:  white;  
    padding:  15px 32px;  
    text-align:  center;  
    text-decoration:  none;  
    display:  inline-block;  
    font-size:  16px;  
}

Example buttons basic style

Button Colors​

Use the background-color property to change the background color of a button:

.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 */

Example buttons colors

Button Sizes​

Use the font-size property to change the font size of a button:

.button1 {font-size:  10px;}  
.button2 {font-size:  12px;}  
.button3 {font-size:  16px;}  
.button4 {font-size:  20px;}  
.button5 {font-size:  24px;}

Example buttons sizes

And use the padding property to change the padding of a button:

.button1 {padding:  10px 24px;}  
.button2 {padding:  12px 28px;}  
.button3 {padding:  14px 40px;}  
.button4 {padding:  32px 16px;}  
.button5 {padding:  16px;}

Example buttons sizes padding

Rounded Buttons​

Use the border-radius property to add rounded corners to a button:

.button1 {border-radius:  2px;}  
.button2 {border-radius:  4px;}  
.button3 {border-radius:  8px;}  
.button4 {border-radius:  12px;}  
.button5 {border-radius:  50%;}

Example buttons rounded buttons

Colored Button Borders​

Use the border property to add a colored border to a button:

.button1 {  
    background-color:  white;  
    color:  black;  
    border:  2px solid #4CAF50;  /* Green */  
}

/*... same for other colors ...*/

Example buttons colored border

Hoverable Buttons​

Use the :hover selector to change the style of a button when you move the mouse over it.

note

Use the transition-duration property to determine the speed of the "hover" effect.

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

/*... same for other colors ...*/

Shadow Buttons​

Use the box-shadow property to add shadows to a button:

.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);  
}

Example buttons shadow

Disabled Buttons​

Use the opacity property to add transparency to a button (creates a "disabled" look).

note

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.

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

Example buttons disabled

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:

.button1 {width:  250px;}  
.button2 {width:  50%;}  
.button3 {width:  100%;}

Example buttons width

Button Groups​

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

.button {  
    float:  left;  
}

Example buttons groups

Bordered Button Group​

Use the border property to create a bordered button group:

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

Example buttons bordered

Vertical Button Group​

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

.button {  
    display:  block;  
}

Example buttons vertical

Table of Contents