Semantic-UI Button Type Animated

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.

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.

Output: 

Semantic-UI Button Type  Animated 

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

Output:

Reference: https://semantic-ui.com/elements/button.html#animated