Open In App

Pure CSS Button Groups

Improve
Improve
Like Article
Like
Save
Share
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