Styling Buttons in CSS

Buttons are the most important element of any website. They are used to perform an action. Buttons are used to submit a form, to open a modal, to open a link, to perform a function, etc. Buttons are used in almost every website. So, it is important to style them properly.

To create buttons we use the <button> tag. Sometimes we also use the <a> tag is used to create buttons for hyperlinks.

Let's look at 10 different types of buttons that we can create using CSS. But first, we will learn to add basic styling to buttons.

Basic Styles for Buttons

Let's look at some basic styles that we can apply to buttons.

1. border - Sets the border of the button.
2. padding - It helps to give the correct size to the button.
3. background-color - Sets the background color of the button.
4. color - Sets the color of the text inside the button.
5. box-shadow - It helps to give a shadow effect to the button.
6. font-size - Sets the font size of the text inside the button.
7. border-radius - It helps to give rounded corners to the button.
8. cursor - It helps to change the cursor when it is over the button.
9. hover - It helps to change the style of the button when the cursor is over the button. It is also called pseudo-class.

Let's now create some beautiful buttons with CSS!

List of 10 CSS Buttons

Here is a list of 10 CSS buttons that you can use in your projects. You can also use these buttons to create your own buttons.

1. Simple Button

Here is a simple button with a simple CSS code.

.button-1 {
  background-color: #4CAF50;
  border: none;
  color: white;
  display: inline-block;
  padding: 15px 32px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

Output:

2. Rounded Button

Use the border-radius property to create a rounded button. Here is a rounded button with a simple CSS code.

.button-2 {
  border-radius: 12px;
}

Output:

3. Button with Shadow

Use the box-shadow property to create a button with shadow. Box shadow takes values for offset-x, offset-y, blur-radius, spread-radius and color.

.button-3 {
  box-shadow: 5px 5px 5px #888888;
}

Output:

4. Button with Border

Use the border property to create a button with a border. the border takes values for width, style, and color.

.button-4 {
  border: 2px solid #008CBA;
}

Output:

5. Button with Gradient

Use the background property to create a button with a gradient.

Use the linear-gradient function to create a linear gradient.

.button-5 {
  background: linear-gradient(to right, #008CBA, #4CAF50);
}

Output:

6. Button with hover effect

Use the :hover pseudo-class to create a button with hover effect.

.button-6 {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button-6:hover {
  background-color: #4CAF50;
}

Output:

7. Capsule Shaped Button

Round the corners of a button to create a capsule shaped button.

.button-7 {
  border-radius: 50px;
}

Output:

8. Button shadow hover animation

The following button has a shadow animation when the mouse pointer hovers over it.

.button-8:hover {
  box-shadow: inset -2px -2px 5px #f2b9ac,
              inset 2px 2px 5px #b06655;
}

Output:

9. Button with shake animation

The following button has a shake animation when the mouse pointer hovers over it.

.button-9:hover {
    animation: shake 0.15s;
    animation-iteration-count: 3;
}

@keyframes shake {
    0% { transform: translate(0, 0) }
    25% { transform: translate(5px, 0) }
    50% { transform: translate(0, 0) }
    75% { transform: translate(-5px, 0) }
    100% { transform: translate(0, 0) }
}

Output:

10. Button skew on hover

The following button has a skew animation when the mouse pointer hovers over it.

.button-10 {
    transition: transform 0.3s;
}

.button-10:hover {
    transform: skewX(-8deg);
}

Output: