Semantic-UI Button Size Variations

Last Updated : 06 Feb, 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 different frameworks.

Semantic-UI Button Variations offers us so many variations in buttons like social, size, floated, colored, compact, toggle, positive, negative, fluid, circular, vertical, and horizontal attached buttons. Here in this article, we will discuss the Floating variation. Semantic-UI Button Variations Size is used to create different sized buttons on different sides.

Semantic-UI Button Variations Size Variant class:

mini: This class is used to create a mini-sized button.
tiny: This class is used to create a tiny-sized button.
small: This class is used to create a small-sized button.
medium: This class is used to create a medium-sized button.
large: This class is used to create a large-sized button.
big: This class is used to create a big-sized button.
huge: This class is used to create a huge-sized button.
massive: This class is used to create a massive-sized button.

Syntax:

<button class="Size-Variant-class ui button">
  ...
</button>

Below example illustrate the Semantic-UI Button Size Variations:

Example: Below example illustrate the Semantic-UI Button Variations Size Variant.

HTML

<!DOCTYPE html> 
<html> 
<head> 
     <title>Semantic UI</title> 
     <link href= 
        "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <style> 
        .container { 
              margin-left: 5px; 
              margin-right: 5px; 
        } 
    </style> 
</head> 
<body> 
    <center> 
      <h1>Geeksforgeeks</h1> 
      <strong>Semantic-UI Button Variations Size Variant</strong> 
    </center> 
    <br><br> 
    <div class="container"> 
      <strong>Size Variant Normal buttons:</strong> 
      <br> 
      <button class="mini ui blue button"> 
        Mini Button 
      </button> 
      <button class="tiny ui blue button"> 
        Tiny Button 
      </button> 
      <button class="small ui blue button"> 
        Small Button 
      </button> 
      <button class="medium ui blue button"> 
        Medium Button 
      </button> 
      <button class="large ui blue button"> 
        Large Button 
      </button> 
      <button class="big ui blue button"> 
        Big Button 
      </button> 
      <button class="huge ui blue button"> 
        Huge Button 
      </button> 
      <button class="massive ui blue button"> 
        Massive Button 
      </button> 
      <br><br> 
      <strong>Size Variant Normal buttons:</strong> 
      <br> 
      <button class="mini ui blue basic button"> 
        Mini Button 
      </button> 
      <button class="tiny ui blue basic button"> 
        Tiny Button 
      </button> 
      <button class="small ui blue basic button"> 
        Small Button 
      </button> 
      <button class="medium ui blue basic button"> 
        Medium Button 
      </button> 
      <button class="large ui blue basic button"> 
        Large Button 
      </button> 
      <button class="big ui blue basic button"> 
        Big Button 
      </button> 
      <button class="huge ui blue basic button"> 
        Huge Button 
      </button> 
      <button class="massive ui blue basic button"> 
        Massive Button 
      </button> 
    </div> 
</body> 
</html>