How to Create a Vertical HTML Button Group with CSS
Button Group
How To, for Web Applications
By: Chrysanthus Date Published: 6 Apr 2025
A vertical button group is a set of HTML buttons, placed one below the other, without any gap between them. All the buttons form a rectangular 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 vertical button groups are produced. For the first button group, the width of each button and the rectangular block as a whole, is 25% of the width of the webpage. For the second button group, the width of each button and the rectangular block as a whole, is 100% of the width of the webpage.
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>Vertical 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>Vertical Button Groups</h1>
<div class="btn-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
<p><br></p>
<div class="btn-group">
<button style='width: 100%'>Apple</button>
<button style='width: 100%'>Samsung</button>
<button style='width: 100%'>Sony</button>
</div>
There are two div elements for the two button groups. The first one is for the button group, where each button is given a 25% width of the overall webpage width. This 25% width is given in the HTML style element above, and not at the button element itself. The second div is for the button group, where each button is given a 100% width of the webpage width. This 100% width for each of the buttons, is given in the style attribute of each of the buttons; thus: "style='width: 100%' " .
There are three buttons in each group, and a div contains the three buttons. The class-name for both div containers is, "btn-group" . Both divs have the same class-name, because the buttons in the two groups are styled in the same way.
The HTML Style Element
Within the start and end tags of the HTML style element, are three CSS rules for styling the buttons in either group. 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 {
display: block; /* Make the buttons appear below each other */
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 */
width: 25%; /* Set a width if needed */
}
The explanation for each property is given in the associated comment in the code (CSS rule). Buttons are normally inline-level elements. In order to make the inline buttons appear vertically at the browser, the display has to be block; hence the property "display: block;".
Problem of Button Bottom Border
Now, if the top and bottom borders of each button are allowed, there would be double borders between buttons. To allow only single border between buttons, the bottom 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-bottom: 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>Vertical 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 {
display: block; /* Make the buttons appear below each other */
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 */
width: 25%; /* Set a width if needed */
}
div.btn-group button:not(:last-child) {
border-bottom: 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>Vertical Button Groups</h1>
<div class="btn-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
<p><br></p>
<div class="btn-group">
<button style='width: 100%'>Apple</button>
<button style='width: 100%'>Samsung</button>
<button style='width: 100%'>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 file 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 . . .NEXT