How to Create a Horizontal HTML Button Group with CSS
Button Group
How To, for Web Applications
By: Chrysanthus Date Published: 6 Apr 2025
A horizontal button group is a set of HTML buttons, placed one next to the other, in a line, without any gap between them. All the buttons form a line block. This tutorial explains how to produce that. It must be stressed here, that the button group as a whole, must be styled appropriately, for appreciation. However, the styling is not much. In fact the CSS coding is not much.
For the project in this tutorial, two horizontal button groups are produced. For the first button group, the width of the different buttons are their natural widths, and so some buttons are longer than the others. The length of the total horizontal bar (line) of buttons is short. For the second button group, the total width of the bar is 100% of the width of the webpage. The different buttons have the same width in this case. Such a horizontal bar (line) of buttons, is known as a Justified Button Group.
The complete webpage code is given at the end of this tutorial. The reader should copy the whole code into a text editor. Save the file with any name, but having the extension, .html . Open the file in the browser. Hover over the buttons in the two groups, and generally appreciate the look of the button groups. The reader is advised to do that, before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Button Group</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern responsible webpage should have at least the first four tags in the HTML Head element above. The HTML style element will have some code to style the two button groups. The style code is not much. The HTML script element will be left empty. The HTML body element will have the two button groups.
Content of the HTML Body Element
The content of the HTML body element is:
<h1>Button Groups</h1>
<div class='btn-group'>
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
<p><br></p><br>
<p>Justified Button Group</p>
<div class='btn-group' style='width:100%'>
<button style='width:33.3%'>Apple</button>
<button style='width:33.3%'>Samsung</button>
<button style='width:33.3%'>Sony</button>
</div>
There are two div elements and both of them have the same class-name, 'btn-group' . Each of them has its own three buttons. Both divs have the same class-name, because the buttons in the two groups are styled in the same way.
For the first group, each button has its natural width, so there is no need to specify any width. For the second group, the 100% width for the whole horizontal bar is specified in the style attribute of their containing div. The width of each button is given in the button’s style attribute, at the element. In this case, the width of each button is 100% divided by the number of buttons: 33.3% for each button. In that way, all the buttons have the same width, assuming that no content of any button is longer than 33.3% .
The HTML Style Element
Within the start and end tags of the HTML style element, are three CSS rules for styling the buttons in both groups. The buttons are styled through (selector) the class-name of the divs. The class-name for both divs is the same as, btn-group .
Styling Each Button
The CSS rule for each button is:
div.btn-group button {
background-color: #04AA6D; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
The explanation for each property is given in the associated comment in the code (CSS rule). Buttons are normally inline-level elements. So, as they are typed next to one another, they will appear next to one another in a horizontal line (at the browser). If the buttons are not floated to the left as in the last property, then there will be a gap between buttons. However, no gap is supposed to appear between buttons, in a proper button group.
Problem of Button Right Border
Now, if the left and right borders of each button is allowed, then there would be double borders between buttons. To allow only single border between buttons, the right border of each button is removed, except for the last button. The CSS rule for this is:
div.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
Button On-hover
The CSS rule for button on-hover is:
/* Add a background color on hover */
div.btn-group button:hover {
background-color: #3e8e41;
}
When the mouse pointer goes over a button, the background color of the button, becomes #3e8e41 (darker green with a bit of brown).
The Complete Webpage Code
And there you have it: the code for the complete webpage is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Button Group</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
div.btn-group button {
background-color: #04AA6D; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
div.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
div.btn-group button:hover {
background-color: #3e8e41;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Button Groups</h1>
<div class='btn-group'>
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
<p><br></p><br>
<p>Justified Button Group</p>
<div class='btn-group' style='width:100%'>
<button style='width:33.3%'>Apple</button>
<button style='width:33.3%'>Samsung</button>
<button style='width:33.3%'>Sony</button>
</div>
</body>
</html>
The reader should copy the whole code into a text editor. Save the file with any name, but having the extension, .html . Open the webpage in the browser. Hover over the buttons in the two groups, and generally appreciate the look of the button groups.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK