WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Buttons


In this section, we introduce the use of CSS to make buttons.


Basic Button Styling

Example

.button { background-color: #f4df41;
    /* yellow */ border: none;
    color: white;
    padding: 18px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    }
Attempt it Yourself »

Button Colors

We can use the background-color property to set the button color:

Example

.button { .button2 {background-color:#4641f4;
   } /* Blue */ .button3 {background-color: #41f455;
   } /* green */ .button4 {background-color: #d3f441;
   color:black;
   } /* yellow */ .button5 {background-color: #f44141;
   } /* red */ }
Attempt it Yourself »

Button Sizes

We can use the font-size property to set the button size:

Example

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

Rounded Buttons

We can use the border-radius property to set the rounded buttons::

Example

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

Colored Button Borders

We can set the button border color using the border property:

Example

background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  /* Green */
...
Attempt it Yourself »

Hoverable Buttons


We can use the: hover selector to modify the style of the mouse over the button. Tip: We can use the transition-duration property to set the speed of the "hover" effect:

Example

.button { -webkit-transition-duration: 0.4s;
  /* Safari */ transition-duration: 0.4s;
  } .button:hover { background-color: #4CAF50;
  /* Green */ color: white;
  } ...
...
Attempt it Yourself »

Shadow Buttons

We can use the box-shadow property to add a shadow to the 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);
  }
Attempt it Yourself »

Disabled Buttons

We can use the opacity property to add transparency to the button (looks like a "disabled" property effect). Tip: We can add a cursor property and set it to "not-allowed" to set a disabled image:

Example

.disabled { opacity: 0.6;
  cursor: not-allowed;
  }
Attempt it Yourself »

Button Width


By default, the size of the button is determined by the text content on the button (match the length based on the text content). We can use the width property to set the width of the button: Tip: If you want to set a fixed width, you can use pixels (px), if you want to set a responsive button, you can set to a percentage.

Example

.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}
Attempt it Yourself »

Button Groups


Remove the margins and add float: left to set the button group:

Example

.button {
    float: left;
}
Attempt it Yourself »

Bordered Button Groups

We can use the border property to set a button group with a border:

Example

.button {
    float: left;
    border: 1px solid green
}
Attempt it Yourself »

Animated Buttons

Example

AAdd arrow mark after mouse over button:

Attempt it Yourself »

Example

Add "ripple" effect when clicked:

Attempt it Yourself »

Example

Add "depress" effect when clicked:

Attempt it Yourself »