Create a Button Group using HTML and CSS Last Updated : 29 Nov, 2023 Comments Improve Suggest changes 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 Create a Button Group using HTML and CSS 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 shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to Create a Transparent Button using HTML and CSS? Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans 2 min read How to create gradient search button using HTML and CSS ? In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha 4 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read 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 Custom Radio Button using HTML and CSS ? The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML 3 min read How to Create Badges using HTML and CSS ? This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that 2 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 Like