Semantic-UI Button Type Animated

Last Updated : 04 Feb, 2022

Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. In this article let us see the buttons of basic type.

Semantic UI provides built-in classes for animated buttons which enhances the interface of the experience. To use the animated button we need to mention the animate class and the transition that we need.

Semantic UI Button Type Animated Class:

animated: This class is used to set the animation.
fade animated: This class is used to set the fading effect animation.

Note: The default axis is horizontal you can make that vertical by using vertical class.

Syntax:

<button class="ui animated-class button">
  ...
</button>

Example: Using animated class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>Semantic-UI Button Type Animated</strong> 
        <br> 
        <div class="ui green animated button"> 
            <div class="visible content"> 
                *Annual Subscription 
            </div> 
            <div class="hidden content"> 
                Pay $12 
            </div> 
        </div> 
        <div class="ui green animated button"> 
            <div class="visible content"> 
                Monthly Subscription 
            </div> 
            <div class="hidden content"> 
                Pay $1.5 
            </div> 
        </div> 
    </center> 
</body> 
</html>

Output:

Semantic-UI Button Type Animated

Example 2: In this example, we will change the axis of the animation from horizontal to vertical by using and non-button animated vertical class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
         rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>Semantic-UI Button Type Animated</strong> 
        <br> 
        <div class="ui green animated button"> 
            <div class="visible content"> 
                Horizontal Animated 
            </div> 
            <div class="hidden content"> 
                Pay $12 
            </div> 
        </div> 
        <div class="ui green vertical animated button"> 
            <div class="visible content"> 
                Vertical Animated 
            </div> 
            <div class="hidden content"> 
                Pay $1.5 
            </div> 
        </div> 
    </center> 
</body> 
</html>

Output:

Semantic-UI Button Type Animated

Example: In this example, we will use fade animated class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>Semantic-UI Button Type Animated</strong> 
        <br> 
        <div class="ui green fade animated button"> 
            <div class="visible content"> 
                Fade Animated 
            </div> 
            <div class="hidden content"> 
                Pay $12 
            </div> 
        </div> 
        <div class="ui green animated button"> 
            <div class="visible content"> 
                Normal Animated 
            </div> 
            <div class="hidden content"> 
                Pay $1.5 
            </div> 
        </div> 
    </center> 
</body> 
</html>