Open In App
Related Articles

Pure CSS Button Groups

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Buttons are one of the most common UI elements. To create buttons group use “pure-button-group” class and add the buttons as number as you want with the help of “pure-button” class. You can also make the button active by using “pure-button-active” class.

Pure CSS Button Groups Classes:

  • pure-button-group: This class is used to create buttons group.

Syntax:

<div class="pure-button-group" role="group">
    <button class="pure-button ">pure button 1</button>
    <button class="pure-button ">pure button 2</button>
    <button class="pure-button ">pure button 3</button>
</div>

Example 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1 >Geeksforgeeks</h1>
        <strong>
            Pure CSS Buttons Groups
        </strong>
        <br /><br />
  
        <div class="pure-button-group" role="group">
  
            <!-- Active button -->
            <button class="pure-button pure-button-active">
                HTML
            </button>
            <button class="pure-button ">CSS</button>
            <button class="pure-button">Data Structure</button>
            <button class="pure-button">Algorithms</button>
        </div>
    </center>
</body>
  
</html>

                    

Output: 

Pure CSS Button Groups

Example 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <strong>
            Pure CSS Buttons Groups
        </strong>
        <br /><br />
  
        <div class="pure-button-group" role="group">
            <button class="pure-button ">C++</button>
            <button class="pure-button ">Java</button>
  
            <!-- Active button -->
            <button class="pure-button pure-button-active">
                Python
            </button>
        </div>
    </center>
</body>
  
</html>

                    

Output: 

Pure CSS Button Groups

Last Updated : 27 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads