CSS Buttons: Learn to Change the Default Styles of HTML Buttons

Default Button

CSS Button

Creating and Styling Buttons

HTML creates buttons but CSS styles them.

CSS buttons can differ in size, color, style, etc. CSS buttons often are with input fields for users to submit information.

Center Buttons

You might encounter issues trying to center buttons in CSS. An easy option is to surround buttons in the <div> element and set its style to text-align:center;:

div {
text-align: center;
}

Colors

CSS button style can be highly improved by adding colors. The button background color can be changed with the background-color property.

Using HEX values, we assign colors to HTML buttons:

.button1 {
  width: 100px;
  height: 50px;
  background-color: #008CBA;
  border: none;
  border-radius: 3px;
  } /* Blue */

Text Size

The font-size property determines how big the text in the button will be. The example below adds various font sizes to buttons:

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

Padding

To set space around the text inside buttons and the outer walls of the container, we use the CSS padding property.

Length indicators (pt, cm, px, etc.) or percentage values (%) set the padding for buttons.

In this example, we set different padding for each button:

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

Rounded Corners

Sharp edges are not always suitable for web designs. To create rounded rectangular boxes instead of regular rectangular, you need to set border-radius property.

In the example below, we test different values of the border-radius property:

.button1 {border-radius: 3px;}
.button2 {border-radius: 6px;}
.button3 {border-radius: 9px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 60%;}

Tip: higher values in the border-radius property can make the oval shape.

Borders

Each CSS button can have a frame surrounding it. To add that frame, we use CSS borders.

In the example, we add a border to our button:

.button {
    width: 100px;
    height: 50px;
    background-color: pink;
    color: red;
    border: 3px solid coral;
}

Note: you can set the style, color, and width of the border by using the border shorthand.

Hover

To make your buttons seem more interactive, you can assign a pseudo-class to them.

The CSS button style can change after the :hover selector triggers (when users hover over the button).

In the example, we make a blue background appear once we move the mouse cursor over the button:

.button {
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s; /* Safari */
}

.button:hover {
    background-color: #41caf4;
    color: red;
}

Tip: the transition-duration property determines the hover effect speed. Therefore, the background appears gradually.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Shadow

The box-shadow property sets a drop shadow effect to the button.

The following example adds a fixed shadow below one button, and a shadow which appears after users move their cursor over another button:

.button1 {
    box-shadow: 0 9px 17px 0 rgba(0,0,0,0.3), 0 7px 21px 0 rgba(0,0,0,0.20);
}

.button2:hover {
    box-shadow: 0 13px 17px 0 rgba(0,0,0,0.25), 0 18px 51px 0 rgba(0,0,0,0.20);
}

Disabled State

You might need to keep the button on the page but prevent users from clicking on it. Make it clear that buttons are disabled by setting the opacity property.

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

Additionally, the disabled CSS button style has a specific mouse cursor once users hover over them (by adding cursor: not allowed).

Width

CSS controls the width of buttons with the width property.

The example below illustrates a few width properties with different values in action:

.button1 {width: 300px;}
.button2 {width: 60%;}
.button3 {width: 80%;}

Groups

To present buttons side-by-side, you need to create CSS button groups by replacing the margin with float.

In the example, we float our buttons on the left side:

.button {
    float: left;
}

Bordered Groups

When CSS buttons are close to each other, it is best to separate them with borders.

.button {
    float: left;
    border: 3px solid orangered;
}

Vertical Groups

It is possible to manipulate the arrangement of CSS buttons by organizing them in a vertical line. You can do this by setting the display property to block value.

The example below creates a vertical button group:

.button {
    display: block;
}

Image

Button

Some CSS button styles let you place buttons on top of images. To achieve this effect, you need the position styling property.

You create the buttons on images by using the following code:

.container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    padding: 16px 30px;
}

Animations

Button With an Arrow

Press Me

You can enhance button styles by adding animations. The :hover selector with opacity make an arrow icon appear next to the text inside a button:

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.7s;
}

.button span:after {
   content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.7s;
}

Pressed Button

Press Me

You can set the CSS button style with special animations to mimic the way real buttons are pressed.

In this example, we create a button with a pressed effect:

.button {
   display: inline-block;
   padding: 17px 27px;
   font-size: 16px;
   cursor: pointer;
   color: white;
   background-color: purple;
   border: none;
   -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  border-radius: 8px;
  box-shadow: 0 10px #998;
}

.button:active {
  background-color: #8842d5;
  box-shadow: 0 6px #667;
  transform: translateY(5px);
}

Fade-in Button

Press Me

The transition and opacity properties can create a fade-in effect for buttons. You also need the :hover selector to set the trigger for the effect.

.button {
   background-color: purple;
   border: none;
   color: #FFFFFF;
   padding: 15px 32px!important;
   text-align: center;
   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
   text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.3;
}
.button:hover {
  opacity: 1;
}

In this example, we have a button with a ripple effect:

Press Me

.button:after {
   content: "";
   background: #f441f1;
   display: block;
   position: absolute;
   padding-top: 290%;
   padding-left: 340%;
   margin-left: -25px !important;
   margin-top: -130%;
   opacity: 0;
   transition: all 0.9s
}
.button:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s;
}

CSS Button: Useful Tips

• You can make buttons functional by using JavaScript. For instance, you can create submit buttons for your forms.
• Bootstrap offers a selection of designed buttons that you can use for your websites.