Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a \"button group\" with CSS?
A button group is a set of buttons styled to appear connected as a single unit. This creates a cohesive interface element where related actions are grouped together. Button groups are commonly used for navigation, social media links, or filter options.
Syntax
.button-group {
display: inline-block;
}
.button-group button {
float: left;
border: none;
padding: value;
}
.button-group button:hover {
background-color: value;
}
Example: Basic Button Group
The following example creates a horizontal button group with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
.btnGroup {
display: inline-block;
font-size: 0;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button {
float: left;
margin: 0px;
border: none;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
background-color: white;
cursor: pointer;
}
button:not(:last-child) {
border-right: 2px solid rgb(6, 134, 49);
}
button:hover {
background: rgb(48, 24, 134);
box-shadow: 5px 10px 18px rgb(41, 39, 173);
color: white;
}
</style>
</head>
<body>
<h2>Social Media Button Group</h2>
<div class="btnGroup">
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
</div>
<p>Hover over the buttons to see the effect</p>
</body>
</html>
A horizontal group of three connected buttons (Facebook, Twitter, LinkedIn) with green border and shadow. When hovering over any button, it changes to purple background with white text and blue shadow.
Example: Vertical Button Group
You can also create vertical button groups by removing the float property −
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-group {
display: inline-block;
border: 2px solid #007bff;
}
.vertical-group button {
display: block;
width: 150px;
padding: 12px;
border: none;
background-color: #f8f9fa;
font-size: 16px;
cursor: pointer;
}
.vertical-group button:not(:last-child) {
border-bottom: 1px solid #dee2e6;
}
.vertical-group button:hover {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="vertical-group">
<button>Home</button>
<button>Products</button>
<button>Services</button>
<button>Contact</button>
</div>
</body>
</html>
A vertical stack of four buttons (Home, Products, Services, Contact) with blue border. Each button spans 150px width and changes to blue background with white text on hover.
Key Properties
| Property | Purpose |
|---|---|
display: inline-block |
Makes the container behave as an inline element |
float: left |
Aligns buttons horizontally |
font-size: 0 |
Removes unwanted spacing between buttons |
border-right |
Creates visual separation between buttons |
Conclusion
Button groups provide an effective way to organize related actions in a clean, cohesive interface. Use horizontal groups for toolbars and vertical groups for navigation menus to improve user experience.
Updated on: 2026-03-15T14:22:19+05:30
681 Views
Advertisements