freeCodeCamp

3.1 KiB

Raw Blame History

title
CSS Buttons

CSS Buttons

CSS Buttons are a great way to add functional design features to your page.

You can style any clickable button (HTML <button> element)

<button>Click Me</button>

The default button looks like the following:

Styling a Button

You can change several properties of a button in order to change its appearance.

To add shadows to the button use box-shadow property.
To add transparency to a button for a disabled effect use the property opacity.
To remove the margins and create a button group add float:left/right property.
To create a button group but with the borders, use float property and add a border property.
To create a vertical group of buttons use display:block property.

Button Color

To change the background color of a button, use the background-color property:

button {background-color: #6ba0f4;}

To add a colored border to a button, use the border property:

button {
  background-color: #FFF;
  color: #FFF;
  border: 2px solid #6ba0f4;
}

Button Text Size

To change the text font size of a button, use the font-size property:

button {font-size: 20px;}

Button Padding

To change the padding of a button, use the padding property:

button {padding: 15px 30px;}

Button Width

To change the width of a button, regardless the text content, use the width property:

button {width: 250px;}

Rounded Buttons

To create rounded buttons, use the border-radius property:

button {border-radius: 50%;}

Hoverable Buttons

To change the style of a button when you move the mouse over it, use the :hover selector:

button:hover {
  background-color: #0E2C5B;
  color: #FFF;
}

To determine the speed of the hover effect use the property transition-duration.

Disabled Buttons

To disable a button, use the cursor property:

button {
  cursor: not-allowed;
}

Button Click Animation

To animate a button on click use 'button:active':

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background-color: #ff7d1a;
  border: none;
  border-radius: 15px;
}

.button:hover {
	background-color: #ff6d00;
}

.button:active {
  background-color: #ff6d00;
  transform: translateY(4px);
}

3.1 KiB Raw Blame History