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= 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= 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:
Please Login to comment...