Pure CSS Button Groups
Last Updated :
27 Jan, 2022
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 >
< 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 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 >
< 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 >
< button class = "pure-button pure-button-active" >
Python
</ button >
</ div >
</ center >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...