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.
- border - Sets the border of the button.
- padding - It helps to give the correct size to the button.
- background-color - Sets the background color of the button.
- color - Sets the color of the text inside the button.
- box-shadow - It helps to give a shadow effect to the button.
- font-size - Sets the font size of the text inside the button.
- border-radius - It helps to give rounded corners to the button.
- cursor - It helps to change the cursor when it is over the button.
- 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.
Example 1
.button-1 {
background-color: #4CAF50;
border: none;
color: white;
display: inline-block;
padding: 15px 32px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
▶ Try it
Output:
2. Rounded Button
Use the border-radius property to create a rounded button. Here is a rounded button with a simple CSS code.
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.
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.
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.
Output:
6. Button with hover effect
Use the :hover pseudo-class to create a button with hover effect.
Example 6
.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;
}
▶ Try it
Output:
7. Capsule Shaped Button
Round the corners of a button to create a capsule shaped button.
Output:
8. Button shadow hover animation
The following button has a shadow animation when the mouse pointer hovers over it.
Example 8
.button-8:hover {
box-shadow: inset -2px -2px 5px #f2b9ac,
inset 2px 2px 5px #b06655;
}
▶ Try it
Output:
9. Button with shake animation
The following button has a shake animation when the mouse pointer hovers over it.
Example 9
.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) }
}
▶ Try it
Output:
10. Button skew on hover
The following button has a skew animation when the mouse pointer hovers over it.
Example 10
.button-10 {
transition: transform 0.3s;
}
.button-10:hover {
transform: skewX(-8deg);
}
▶ Try it
Output: