Semantic-UI Button Active States
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 in different frameworks.
Semantic-UI Button Active States are is one of the states from 3 states of Semantic-UI Button States. This class is used to set the button status active. A button can show it is currently the active user selection
Semantic-UI Button Active States Class:
- active: This class is used to set the button status active.
Syntax:
<button class="ui active button"> ....... </button>
Example 1: Below is the example that illustrates the use of Semantic-UI Button Active States.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Button Active State</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < style > button { width: 150px; } </ style > </ head > < body > < center > < h1 class = "ui green" >w3wiki</ h1 > < strong > Semantic-UI Button Active States </ strong > < br >< br > < div class = "container" > < strong >Button Active States:</ strong > < button class = "ui active button" > < i class = "like icon" ></ i > Like </ button > < button class = "ui active button" > < i class = "share icon" ></ i > share </ button > < button class = "ui active button" > < i class = "trash icon" ></ i > trash </ button > </ div > </ center > </ body > </ html > |
Output:
Example 2: Below is another example that illustrates the use of Semantic-UI Button Active States.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Button Active States</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < style > button { width: 150px; } </ style > </ head > < body > < center > < h1 class = "ui green" >w3wiki</ h1 > < strong > Semantic-UI Button Active States </ strong > < br >< br > < div class = "container" > < strong >Button Active States:</ strong > < button class = "ui active button" > < i class = "like icon" ></ i > Like </ button > < button class = "ui active button" > < i class = "share icon" ></ i > share </ button > < button class = "ui active button" > < i class = "trash icon" ></ i > trash </ button > < br >< br > < strong > Basic Button Active States: </ strong > < button class = "ui active basic button" > < i class = "like icon" ></ i > Like </ button > < button class = "ui active basic button" > < i class = "share icon" ></ i > share </ button > < button class = "ui active basic button" > < i class = "trash icon" ></ i > trash </ button > </ div > </ center > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/button.html#active
Contact Us