Introduction
Buttons are an important element of web design and user interaction. They allow users to take specific actions, navigate through websites, and engage with content. CSS provides a wide range of styling options to make buttons visually appealing, intuitive, and consistent with the overall design. This also improves the user experience, which eventually helps increase engagement on the webpage.
In this article, we will discuss different CSS techniques to style buttons, like basic styling, colors, sizes, shapes, hover effects, & more.
Basic Button Styling
To start styling buttons with CSS, we first need to target the <button> element or any other element with a class or ID that represents a button. The most basic properties for styling buttons include background-color, color, font-size, padding, & border. For example:
<!DOCTYPE html>
<html>
<head>
<title>Button Colors Example</title>
<style>
.btn-blue {
background-color: #2196F3;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.btn-red {
background-color: #f44336;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.btn-green {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn-blue">Blue Button</button>
<button class="btn-red">Red Button</button>
<button class="btn-green">Green Button</button>
</body>
</html>
Output
Button Sizes
You can easily change the size of buttons by adjusting the font-size, padding, and height properties in CSS. Let’s see an example of how to create buttons of different sizes:
<!DOCTYPE html>
<html>
<head>
<title>Button Sizes Example</title>
<style>
.btn-small {
font-size: 12px;
padding: 5px 10px;
height: 30px;
}
.btn-medium {
font-size: 16px;
padding: 10px 20px;
height: 40px;
}
.btn-large {
font-size: 20px;
padding: 15px 30px;
height: 50px;
}
</style>
</head>
<body>
<button class="btn-small">Small Button</button>
<button class="btn-medium">Medium Button</button>
<button class="btn-large">Large Button</button>
</body>
</html>
Output
In this example, we define three button classes: btn-small, btn-medium, and btn-large. Each class has different values for font-size, padding, and height properties to create buttons of varying sizes.
Rounded Buttons
To create buttons with rounded corners, you can use the border-radius property in CSS. For example:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Buttons Example</title>
<style>
.btn-rounded {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-pill {
background-color: #2196F3;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn-rounded">Rounded Button</button>
<button class="btn-pill">Pill Button</button>
</body>
</html>
Output
In this example, we define two button classes: btn-rounded and btn-pill. The btn-rounded class has a border-radius of 4px, which creates slightly rounded corners. The btn-pill class has a higher border-radius value of 20px, resulting in a pill-shaped button.
Colored Button Borders
In addition to changing the background color of buttons, you can also add colored borders to create visually appealing button styles. For example:
<!DOCTYPE html>
<html>
<head>
<title>Colored Button Borders Example</title>
<style>
.btn-border-blue {
background-color: white;
color: #2196F3;
font-size: 16px;
padding: 10px 20px;
border: 2px solid #2196F3;
cursor: pointer;
}
.btn-border-red {
background-color: white;
color: #f44336;
font-size: 16px;
padding: 10px 20px;
border: 2px solid #f44336;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn-border-blue">Blue Border Button</button>
<button class="btn-border-red">Red Border Button</button>
</body>
</html>
Output
In this example, we define two button classes: btn-border-blue and btn-border-red. Both classes have a white background color and specific text colors (blue for btn-border-blue and red for btn-border-red). We also add a 2-pixel solid border with the corresponding color using the border property.
Hoverable Buttons
To make buttons more interactive, you can use the :hover pseudo-class in CSS to change the button's appearance when the user hovers over it. For example:
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Buttons Example</title>
<style>
.btn-hover {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-hover:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<button class="btn-hover">Hover Me</button>
</body>
</html>
Output
In this example, we define a button class called btn-hover. The button has a green background color (#4CAF50) and white text. We also add a transition property to create a smooth transition effect when the background color changes on hover.
The .btn-hover:hover selector targets the button when the user hovers over it. Inside this selector, we change the background color to a slightly darker shade of green (#45a049) to create a hover effect.
Shadow Buttons
You can add depth and visual interest to buttons by applying box shadows using the box-shadow property in CSS. For example:
<!DOCTYPE html>
<html>
<head>
<title>Shadow Buttons Example</title>
<style>
.btn-shadow {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.btn-shadow:hover {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="btn-shadow">Shadow Button</button>
</body>
</html>
Output
In this example, we define a button class called btn-shadow. The button has a green background color (#4CAF50) and white text. We apply a box shadow using the box-shadow property, which takes four values: horizontal offset (0), vertical offset (4px), blur radius (6px), and color (rgba(0, 0, 0, 0.1)).
We also add a transition property to create a smooth transition effect when the box shadow changes on hover.
The .btn-shadow:hover selector targets the button when the user hovers over it. Inside this selector, we increase the vertical offset and blur radius of the box shadow to create a more pronounced shadow effect on hover.
Disabled Buttons:
Sometimes you may want to disable a button to prevent users from clicking it. You can achieve this by using the disabled attribute in HTML and styling it with CSS. For example:
<!DOCTYPE html>
<html>
<head>
<title>Disabled Buttons Example</title>
<style>
.btn-disabled {
background-color: #cccccc;
color: #666666;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: not-allowed;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="btn-disabled" disabled>Disabled Button</button>
</body>
</html>
Output
In this example, we define a button class called btn-disabled. The button has a light gray background color (#cccccc) and a darker gray text color (#666666). We add the disabled attribute to the <button> element to disable it.
In the CSS, we set the cursor property to not-allowed to indicate that the button is not clickable. We also reduce the opacity of the button to 0.6 to visually distinguish it from active buttons.
Button Width
By default, buttons have a width that fits their content. However, you can control the width of buttons using the width property in CSS. For example:
<!DOCTYPE html>
<html>
<head>
<title>Button Width Example</title>
<style>
.btn-full-width {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
width: 100%;
}
.btn-fixed-width {
background-color: #2196F3;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
width: 200px;
}
</style>
</head>
<body>
<button class="btn-full-width">Full Width Button</button>
<br><br>
<button class="btn-fixed-width">Fixed Width Button</button>
</body>
</html>
Output
In this example, we define two button classes: btn-full-width and btn-fixed-width.
The btn-full-width class has a width of 100%, which makes the button span the full width of its container. This is useful when you want the button to take up the entire available space.
The btn-fixed-width class has a fixed width of 200px. This means that regardless of the button's content, it will always have a width of 200 pixels. You can adjust the width value according to your needs.
Button Groups
You can group related buttons together to create a button group. This is commonly used for actions that are closely related or mutually exclusive. Let’s discuss an example of how to create button groups using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Button Groups Example</title>
<style>
.btn-group {
display: inline-block;
}
.btn-group button {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
float: left;
}
.btn-group button:not(:last-child) {
border-right: 1px solid #bbb;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="btn-group">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
</html>
Output
In this example, we create a container <div> with the class btn-group to hold the grouped buttons. We style the buttons inside the group using the .btn-group button selector.
The buttons have a green background color, white text, and no borders. We use the float: left property to align the buttons horizontally.
To add a separator between the buttons, we use the .btn-group button:not(:last-child) selector to target all buttons except the last one. We add a right border of 1px solid #bbb to create a visual separation.
Finally, we use the .btn-group:after selector to clear the floats and ensure that the button group container expands to fit the buttons.
Bordered Button Group
You can create a bordered button group by adding a border around the entire group and removing the borders between individual buttons. For example:
<!DOCTYPE html>
<html>
<head>
<title>Bordered Button Group Example</title>
<style>
.btn-group {
display: inline-block;
border: 1px solid #4CAF50;
border-radius: 4px;
overflow: hidden;
}
.btn-group button {
background-color: white;
color: #4CAF50;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
float: left;
}
.btn-group button:hover {
background-color: #4CAF50;
color: white;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="btn-group">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
</html>
Output
In this example, we add a border around the btn-group container using the border property. We also set a border-radius of 4px to give the button group rounded corners.
The buttons inside the group have a white background color and green text color. We remove the borders between the buttons by setting border to none.
To create a hover effect, we use the .btn-group button:hover selector to change the background color to green and the text color to white when a button is hovered over.
Finally, we use the overflow: hidden property on the btn-group container to ensure that the borders of the button group are properly contained.
Vertical Button Group
You can create a vertical button group by stacking buttons vertically instead of horizontally. For example:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Button Group Example</title>
<style>
.btn-group-vertical {
display: inline-block;
}
.btn-group-vertical button {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
width: 100%;
display: block;
text-align: left;
}
.btn-group-vertical button:not(:last-child) {
border-bottom: 1px solid #bbb;
}
.btn-group-vertical button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="btn-group-vertical">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
</html>
Output
In this example, we create a container <div> with the class btn-group-vertical to hold the vertically stacked buttons. We style the buttons inside the group using the .btn-group-vertical button selector.
The buttons have a green background color, white text, and no borders. We set the width to 100% and use display: block to make the buttons stack vertically. We also align the button text to the left using text-align: left.
To add a separator between the buttons, we use the .btn-group-vertical button:not(:last-child) selector to target all buttons except the last one. We add a bottom border of 1px solid #bbb to create a visual separation.
Finally, we add a hover effect using the .btn-group-vertical button:hover selector to change the background color to a darker shade of green when a button is hovered over.
518+ registered 
