CSS Buttons

CSS Styling Buttons

With CSS, different HTML buttons can be styled in many ways.

The most common CSS properties for styling buttons are:

• background-color - defines the background color of a button

• color - defines the text color of a button

• border - defines the border of a button

• padding - defines the space between the text and the border of a button

• border-radius - adds rounded corners to a button

• box-shadow - adds shadows to a button

• text-align - centers the text of a button

• font-size - defines the font size of the text on a button

• text-decoration - removes the underline for elements used as buttons

• cursor - changes the mouse cursor when hovering over the button

Buttons are typically created with the HTML <button> element, the <input type="button"> element, or an <a> element styled as a button.

CSS Basic Button Styling

<button>Default Button</button> <button class="btn">CSS Button</button>

Example

.button {

  background-color: red;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  cursor: pointer;

}

CSS Button Colors

The CSS background-color property is used to define the background color of a button.

The CSS color property is used to define the text color of a button.

<button type="button" class="btn btn1">Green</button> <button type="button" class="btn btn2">Blue</button> <button type="button" class="btn btn3">Red</button> <button type="button" class="btn btn4">Gray</button> <button type="button" class="btn btn5">Black</button>

Example

.button1 {background-color: #04AA6D;} /* Green */

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

CSS Button Sizes

The CSS font-size property is used to define the font size for the text on a button:

<button type="button" class="btn btn1 font1">10px</button> <button type="button" class="btn btn2 font2">12px</button> <button type="button" class="btn btn3 font3">16px</button> <button type="button" class="btn btn4 font4">20px</button> <button type="button" class="btn btn5 font5">24px</button>

Example

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

The CSS padding property is used to define the space between the text and the border of a button:

<button type="button" class="btn btn1 padding1">10px 24px</button> <button type="button" class="btn btn2 padding2">12px 28px</button> <button type="button" class="btn btn3 padding3">14px 40px</button> <button type="button" class="btn btn4 padding4">32px 16px</button> <button type="button" class="btn btn5 padding5">16px</button>

Example

.button1 {padding: 10px 24px;}

.button2 {padding: 12px 28px;}

.button3 {padding: 14px 40px;}

.button4 {padding: 32px 16px;}

.button5 {padding: 16px;}

CSS Rounded Buttons

The CSS border-radius property is used to add rounded corners to a button:

<button type="button" class="btn btn1 round1">2px</button> <button type="button" class="btn btn2 round2">4px</button> <button type="button" class="btn btn3 round3">8px</button> <button type="button" class="btn btn4 round4">12px</button> <button type="button" class="btn btn5 round5">50%</button>

Example

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

CSS Button Borders

The CSS border property is used to define the border of a button:

<button type="button" class="btn border1">Green</button> <button type="button" class="btn border2">Blue</button> <button type="button" class="btn border3">Red</button> <button type="button" class="btn border4">Gray</button> <button type="button" class="btn border5">Black</button>

Example

.button1 {border: 2px solid #04AA6D;}
.button2 {border: 2px dotted
  #008CBA;}
.button3 {border: 2px dashed #f44336;}
.button4 {border: 1px
  solid #e7e7e7;}
.button5 {border: 1px solid #555555;}