Semantic-UI Button Variations Social Variant

Last Updated : 21 Feb, 2022

Semantic UI offers many components for users to design their interface. The Semantic UI Button Variations offers us 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 Social is used to create a social icon button on differents.

Semantic-UI Button Variations Social Variant class:

social-icon-name: This is not the name of the class you have to use, here you have to mention the social platform name in lowercase like Facebook, youtube. And do not forget to include the icon inside the button element.

Syntax:

<button class="ui social-icon-name button">
 <i class="... icon"></i>
  ....
</button>

The below example illustrates the Semantic-UI Button Variations Social Variant:

Example:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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>GeeksforGeks</h1>
        <strong>
          Semantic-UI Button Variations
          Social Variant
        </strong>
    </center>
    <br><br>
    <div class="container">
        <strong>Social Variant Normal buttons:</strong>
        <br>
        <button class="ui facebook button">
            <i class="facebook icon"></i>
            Facebook
        </button>
        <button class="ui twitter button">
            <i class="twitter icon"></i>
            Twitter
        </button>
        <button class="ui linkedin button">
            <i class="linkedin icon"></i>
            LinkedIn
        </button>
        <button class="ui instagram button">
            <i class="instagram icon"></i>
            Instagram
        </button>
        <button class="ui youtube button">
            <i class="youtube icon"></i>
            YouTube
        </button>
        <br><br>
        <strong>Social Variant Basic buttons:</strong>
        <br>
        <button class="ui facebook basic button">
            <i class="facebook icon"></i>
            Facebook
        </button>
        <button class="ui twitter basic button">
            <i class="twitter icon"></i>
            Twitter
        </button>
        <button class="ui linkedin basic button">
            <i class="linkedin icon"></i>
            LinkedIn
        </button>
        <button class="ui instagram basic button">
            <i class="instagram icon"></i>
            Instagram
        </button>
        <button class="ui youtube basic button">
            <i class="youtube icon"></i>
            YouTube
        </button>
    </div>
</body>
 
</html>