Pure CSS Button Groups

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=
        "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        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:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
    "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        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:

Explore