html

Button Styling in CSS | Explained

Inserting plain buttons to your website can be a bit boring, however, adding various styles to them can enhance their overall look. This styling can be performed using multiple CSS properties such as background color, color, width, padding, box-shadow, transition, etc. Here in this write-up, we will teach you how to style buttons in various fashions. This post is designed to cover the following topics.

  1. Changing colors of buttons
  2. Altering the sizes of buttons
  3. Creating rounded or circled buttons
  4. Adding hover effect to buttons
  5. Adding effects to buttons
  6. Adding shadows to buttons
  7. Styling disabled buttons

Let’s get started.

How to Change Colors of Buttons

For the purpose of changing colors, more specifically, background colors of buttons, the CSS background-color property is used. Below we have presented you with an example.

HTML

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

Using basic HTML we have created a button.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 20px 35px;

font-size: 16px;

}

Apart from giving the button a certain padding, border, and font size, we have set the background color to rosy brown. You can change the color according to your desire.

Output

A button with a rosy brown background color was created.

If you desire to add colors to only the border of the button, then use the CSS border property.

CSS

.btn {

background-color: white;

border: 2px solid blue;

color: black;

padding: 25px;

font-size: 16px;

}

In the above code, we are setting the background color to white, meanwhile, the solid border is been given a length of 2px with blue color.

Output

A button with blue border was generated.

How to Alter the sizes of buttons

There can be various ways to alter the size of the button and all of the possible ways are described below along with the appropriate and to-the-point examples.

Method 1: By changing the padding of buttons

The first and most used way of changing the size of a button is by using the padding property. Different padding will result in different sizes of a button.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

font-size: 16px;

}

.btn1 {

padding: 10px 24px;

}

.btn2 {

padding: 32px 16px;

}

The top, and bottom sides of the the first button have been assigned padding of 10px, meanwhile the right, and left sides are given padding of 24px. As for the second button the top, and bottom sides are provided with padding of 32px each, whereas, the right, and left sides are given with 16px padding.

Output

Buttons with various paddings were created.

Method 2: By changing the font-size

Another way of changing the size of a button is to change the font size of te button. By increasing or decreasin the font size, the size of button gets affected. The larger the font size, the bigger the button. Consider the code snippet below.

HTML

<button class="btn btn1">Button</button>

<button class="btn btn2">Button</button>

Here we have created two buttons to demonstrate the difference between various font sizes and how these affect the button sizes.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 20px 35px;

}

.btn1 {

font-size: 12px;

}

.btn2 {

font-size: 24px;

}

Both the buttons have been assigned the same background color, color, border, and padding. However, the first button has been assigned the font size of 12px and the other button 24px.

Output

Buttons with various sizes were created successfully.

Method 3: By changing the width of buttons

Another way of changing the size of a button is by adjusting its width. Follow the example below.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 20px 35px;

display: block;

margin: 5px 3px;

font-size: 16px;

}

.btn1 {

width: 20%;

}

.btn2 {

width: 50%;

}

For the purpose of displaying each of the button in a new line we are converting them to block-level elements and setting their margins. Moreover, the width of the first button is set to 20%, while the width of the second button is set to 50%.

Output

Buttons with various widths have been created with success.

How to create rounded or circled buttons

To create rounded or circled buttons, use the CSS border-radius property. We have presented you an example below.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 25px;

font-size: 16px;

}

.btn1 {

border-radius: 8px;

}

.btn2 {

border-radius: 50%;

}

In the above code, for the purpose of rounding the corners of the button only, we are giving the border-radius a value in pixels. However, to make the button a complete circle, we have given the border-radius a value in percentage.

Output

A rounded and circled button was created with great ease.

How to add hover effect to buttons

To make your buttons more interesting, you can add a hover effect to them to make their appearance more attractive. Use the code snippet below.

CSS

.btn {

background-color: white;

border: 2px solid rosybrown;

color: black;

padding: 25px;

font-size: 16px;

}

.btn:hover {

background-color: rosybrown;

color: white;

}

Before the hover effect, the button has been styled using various CSS properties. Meanwhile, once the user brings the mouse over the button the background color will change to rosy brown and the font color to white.

Output

A button with a hover effect has been generated.

Another fun thing that you can do is that you specify the transition duration of the hover effect to make it more attractive by using the transition-duration property.

CSS

.btn {

background-color: white;

border: 2px solid rosybrown;

color: black;

padding: 25px;

font-size: 16px;

transition-duration: 0.5s;

}

.btn:hover {

background-color: rosybrown;

color: white;

}

The transition duration has been set to 0.5 seconds.

Output

A hover effect with a transition duration was successfully added.

How to add a fade in effect to buttons

Fade in effects are used along with hover effects and these can be added to buttons using opacity property. Here is an example.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 30px;

font-size: 16px;

opacity: 0.4;

transition-duration: 0.5s;

}

.btn:hover {

opacity: 1;

}

Before the hover effect the opacity of the button has been set to 0.4. Whereas, when the hover effect initiates, the opacity will turn to 1 with a transition duration of 0.5 seconds.

Output

A fade in effect was implemented successfully.

Hwo to add shadows to buttons

Using the box-shadow property, shadows can be added to buttons to enhance their beauty. Follow the below-mentioned example.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 30px;

font-size: 16px;

transition-duration: 0.5s;

box-shadow: 0 5px 10px 0 gray;

}

In the code above, we are adding a shadow of gray color and we have assigned each side of the shadow some length.

Output

A shadow was added successfully to the button.

Note: You can also add a hover effect along with the shadow to make the button further attractive.

How to style disabled-buttons

To make a disable button, we have to mention a disabled attribute to the button tag in HTML, as shown in the HTML snippet below:

<button class="btn" disabled>Button</button>

For the purpose of styling disabled buttons, you can use two CSS properties which are: opacity, and cursor. Below we have demonstrated how you can create a disabled button.

CSS

.btn {

background-color: rosybrown;

border: none;

color: white;

padding: 30px;

font-size: 16px;

transition-duration: 0.5s;

opacity: 0.4;

cursor: not-allowed;

}

To create a disabled button the opacity of the button has been to 0.4 and the cursor to not-allowed.

Output

A disabled button was generated.

Conclusion

Adding plain buttons to your web pages can be a bit boring, however, styling them by using various CSS properties can enhance their overall look. Properties like background-color, color, border-radius, opacity, padding, width, box-shadow, and so on can come in handy when giving a certain style to buttons. Besides this, you can also add various effects to the buttons such as hover, or fade in, etc. Moreover, you can also animate these effects by using transition property. This post guides about various ways in which you can style your buttons with the help of examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.