CSS Button Groups

Please Share On:

Definition:

You can create horizontal and vertical button groups using CSS.

Horizontal Button Groups

To create a group of horizontal buttons, you have to remove margins and apply float: left;

Syntax:

.button { float: left;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          padding: 20px 20px;
          color:white;
		  text-align: center;
		  text-decoration: none;
          float: left;
		}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Horizontal Button Groups</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>

	</body>
</html>

Output:

try it yourself

Vertical Button Groups

For vertical button group, apply display: block; instead of float: left; to display a group of buttons vertically down.

Syntax:

.button { display: block; }

Source Code:

<!DOCTYPE html>
<html>
    <head>
        <style>
                    
        .button {
          background-color: green;
          padding: 20px 20px;
          color:white;
          text-align: center;
          text-decoration: none;
          display: block;
        }
           
        </style>
    </head>
     
    <body>
    <h2>CSS Vertical Button Groups</h2>
       
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>
 
    </body>
</html>

Output:

Try it yourself

Try it yourself by changing float:left; and display:block; to see the differences.

Donate to support writers.

You may be interested in the following topics:

Post Views: 469

Definition:

Horizontal Button Groups

Syntax:

Source Code:

Output:

Vertical Button Groups

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.