Semantic-UI Button Active States

Last Updated : 14 Mar, 2022

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">Geeksforgeeks</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:

Semantic-UI Button Active States

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">Geeksforgeeks</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>