Semantic-UI Button Colored Variations
Last Updated :
29 Jan, 2022
Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.
The Button variations have different kinds of buttons such as Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vertically and Horizontally attached buttons. In this article, we will learn about the Semantic-UI Button Variations Colored Button, where we can set the color as we want.
Semantic-UI Button Variations Colored Buttons Class:
- color-name: This is not a class it is represented as a variable that can be any name of the color. Color name can be blue, green, red, etc.
Syntax:
<button class="ui color-name button">
...
</button>
Below example illustrates the Semantic-UI Button Variations Colored Buttons:
Example:
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" />
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Button Variations Colored Buttons</strong>
<br><br>
<strong>Colored Icon Button:</strong>
<button class="ui red button">Red</button>
<button class="ui orange button">Orange</button>
<button class="ui yellow button">Yellow</button>
<button class="ui olive button">Olive</button>
<button class="ui green button">Green</button>
<button class="ui teal button">Teal</button>
<br><br>
<strong>Colored Button:</strong>
<button class="ui blue button">
<i class="icon fire"></i>
</button>
<button class="ui violet button">
<i class="icon bolt"></i>
</button>
<button class="ui purple button">
<i class="icon setting"></i>
</button>
<button class="ui pink button">
<i class="icon user"></i>
</button>
<button class="ui brown button">
<i class="icon facebook"></i>
</button>
<button class="ui grey button">
<i class="icon instagram"></i>
</button>
<button class="ui black button">
<i class="icon laptop"></i>
</button>
</center>
</body>
</html>
Output:
Semantic-UI Button Variations Colored Buttons
Reference: https://semantic-ui.com/elements/button.html#colored
Similar Reads
Semantic-UI Button Floated Variations 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 soc
2 min read
Semantic-UI Button Fluid Variations Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Button offers several types of micro button components like Types, Groups
2 min read
Semantic-UI Button Variations 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 the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers variation of button, there are Social b
4 min read
Semantic-UI Button Compact Variations Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations. The Button variations have different kinds of buttons such as Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vert
1 min read
Semantic-UI Button Group Variations 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 Group also offers a group variation of buttons, there are I
3 min read