Create a Button Group using HTML and CSS Last Updated : 29 Nov, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .button-group that contains all buttons. Then we apply CSS styles, like - padding, margin, background, etc to make the button group. Example: Here, we will create a Horizontal Button Group. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Button Group</title> <style> body { display: flex; justify-content: center; align-items: center; } .button-group .button { padding: 10px 20px; border: 1px solid black; background-color: #136a13; color: #fff; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; float: left; } .button-group .button:not(:last-child) { border-right: none; } .button:hover { background-color: #2980b9; } </style> </head> <body> <div class="button-group"> <button class="button">HTML</button> <button class="button">CSS</button> <button class="button">JavaScript</button> <button class="button">Bootstrap</button> </div> </body> </html> Output: Example 2: Here, we will create a Vertical Button Group. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Vertical Button Group</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .button-group { display: flex; flex-direction: column; align-items: center; } .button-group .button { margin: 0; width: 150px; padding: 10px; border: 1px solid black; background-color: #136a13; color: #fff; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; } .button-group .button:not(:last-child) { border-bottom: none; } .button-group .button:hover { background-color: #2980b9; } </style> </head> <body> <div class="button-group"> <button class="button">HTML</button> <button class="button">CSS</button> <button class="button">JavaScript</button> <button class="button">Bootstrap</button> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a basic button group in Bootstrap ? V vkash8574 Follow Improve Article Tags : Web Technologies Geeks Premier League Web Templates Web Tech - Advanced Geeks Premier League 2023 +1 More Similar Reads How to create a Split Button Dropdown using CSS ? In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps. Ta 4 min read How to create Text Buttons using CSS ? In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H 2 min read How to create group of buttons in a page ? In this article, we will learn How to create a group of buttons on the page. This can be done by setting the 'data-role' attribute to controlgroup. controlgroup: Groups multiple buttons and other widgets into one visual set, Visually integrate multiple button-styled inputs of a single type into a gr 2 min read How to Create Alert Button in HTML? To create alert buttons in HTML, define buttons with different classes for various alert types Success, Info, Warning, Danger, and Default, and style them with background colors, border colors, and hover effects for visual feedback. Utilize CSS transitions to add smooth animations when the buttons a 2 min read How to create a basic button group in Bootstrap ? Button: The .btn classes are used with the <button> element to create the basic button using Bootstrap. The buttons in bootstrap are used in forms, dialogs, etc. Button Groups in Bootstrap: In Bootstrap, button groups has group of buttons together on a single line. Button group is created usin 2 min read Foundation CSS Button Group Hollow and Clear Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass 3 min read Like