Semantic-UI Button Group Variations
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic UI Button Group also offers a group variation of buttons, there are Icon buttons, labelled icon buttons, mixed group buttons, equal width, coloured buttons, basics buttons, Group sizes buttons, etc.
Semantic UI Button Group Variations Classes:
- Vertical Buttons: This class is used to set button groups formatted to appear vertically.
- Icon Buttons: This class is used to set button groups formatted as icons.
- Labeled Icon Buttons: This class is used to set button groups formatted as labelled icons.
- Mixed Group: This class is used to set button groups formatted to use multiple button types together.
- Equal Width: This class is used to set button groups that can have their widths divided evenly.
- Colored Buttons: This class is used to set button groups that can have a shared colour.
- Basic Buttons: This class is used to set button groups that can be less pronounced.
- Group Sizes: This class is used to set button groups that can have a shared size.
Syntax:
<div class="ui Group-Variations-Class">
<button class="ui button">...</button>
<! this is where you want to use icons>
<button class="ui button">
<i class="...."></i>
</button>
</div>The below example will illustrate the Semantic-UI Button Group Variations:
Example:
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" /> <style> button { width: 170px; } .container { width: 600px; margin-left: 10%; } </style> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Button Group Variations</strong> </center> <br><br> <div class="container"> <div> <strong>Vertical Buttons:</strong> <div class="ui vertical buttons"> <button class="ui button">Feed</button> <button class="ui button">Messages</button> <button class="ui button">Events</button> </div> </div> <br> <div> <strong>Icon Buttons:</strong> <div class="ui icon buttons"> <button class="ui button"> <i class="like red icon"></i> </button> <button class="ui button"> <i class="pause green icon"></i> </button> <button class="ui button"> <i class="share blue icon"></i> </button> </div> </div> <br> <div> <strong>Labeled Icon Buttons:</strong> <div class="ui vertical labeled icon buttons"> <button class="ui red button"> <i class="like icon"></i> Like </button> <button class="ui green button"> <i class="play icon"></i> Play </button> <button class="ui blue button"> <i class="shuffle icon"></i> Shuffle </button> </div> </div> <br> <div> <strong>Mixed Group:</strong> <div class="ui green buttons"> <button class="ui labeled icon button"> <i class="left chevron icon"></i> Previous </button> <button class="ui button"> <i class="play icon"></i> Play </button> <button class="ui right labeled icon button"> Next <i class="right chevron icon"></i> </button> </div> </div> </div> </body></html> |
Output:
Semantic UI Button Group Variations
Example 2:
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" /> <style> button { width: 170px; } .container { width: 600px; margin-left: 10%; margin-right: 10%; } </style> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Button Group Variations</strong> </center> <br><br> <div class="container"> <div> <strong>Equal Width:</strong><br> <div class="three ui buttons"> <button class="ui red button"> Like </button> <button class="ui yellow button"> Share </button> <button class="ui purple button"> Subscribe </button> </div> <div class="two ui buttons"> <button class="ui blue button"> Sell </button> <button class="ui green button"> Buy </button> </div> </div> <br> <div> <strong>Colored Buttons:</strong> <div class="ui green buttons"> <button class="ui button"> Like </button> <button class="ui button"> Share </button> <button class="ui button"> Subscribe </button> </div> </div> <br> <div> <strong>Basic Buttons:</strong> <div class="ui basic buttons"> <button class="ui button"> Like </button> <button class="ui button"> Share </button> <button class="ui button"> Subscribe </button> </div> </div> <br> <div> <strong>Group Sizes:</strong> <br> <div class="ui small blue buttons"> <button class="ui button"> Small Like </button> <button class="ui button"> Small Share </button> <button class="ui button"> Small Subscribe </button> </div> <br><br> <div class="ui large green buttons"> <button class="ui button"> large Like </button> <button class="ui button"> large Share </button> <button class="ui button"> large Subscribe </button> </div> </div> <br> </div> </body></html> |
Output:
Button Group Variations
Reference: https://semantic-ui.com/elements/button.html
Please Login to comment...