Open In App

Semantic-UI | Buttons

Last Updated : 28 May, 2020
Comments
Improve
Suggest changes
Like Article
Like
Report
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. It can be used directly by CDN. There are different types of buttons in Semantic UI. It provides a wide range of classes to color the button, animate the button, and a lot more. 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>
        <div class="ui container">
        <h1>Buttons in Semantic UI</h1>
            <button class="ui button">
                Simple Button
            </button>   
            <a class="ui button">
                a tag Button
            </a>   
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </body>
</html>
Output: Here we simply used UI and button class and that button looks already awesome. Example: Let's see some different color button. 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>
        <div class="ui container">
            <h1>Different colout button in Semantic-UI</h1>
            <div>
                <button class="ui button">Standard</button>
                <button class="ui primary button">Primary</button>
                <button class="ui secondary button">Secondary</button>
            </div>
            <br>
            <div>
                <button class="ui red button">Standard</button>
            <button class="ui orange button">Primary</button>
            <button class="ui yellow button">Secondary</button>
            </div>       
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </body>
</html>
Output: You can use a lot of other colors. Example: Inverted Button html 
<!-- Write HTML code here -->
<!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>
        <div class="ui inverted segment container">
            <h1>Different colout button in Semantic-UI</h1>
            <div>
                <button class="ui inverted button">
                    Standard
                </button>
                <button class="ui inverted primary button">
                    Primary
                </button>
                <button class="ui inverted secondary button">
                    Secondary
                </button>
            </div>
            <br>
            <div>
                <button class="ui inverted red button">
                    Standard</button>
            <button class="ui inverted orange button">
                Primary</button>
            <button class="ui inverted yellow button">
                Secondary</button>
            </div>       
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
         </script>
    </body>
</html>
Output: Example:

Social Media Button

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>
        <div class="ui container">
            <h1>Social Media Buttons</h1>
            <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 youtube button">
                <i class="youtube icon"></i>
                YouTube
              </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>
                    
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </body>
</html>
Output: Example:

Icon Button

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>
        <div class="ui container">
            <h1>Icon Buttons</h1>
            <div class="ui icon buttons">
                <button class="ui button">
                    <i class="bold icon"></i></button>
                <button class="ui button active">
                    <i class="underline icon"></i></button>
                <button class="ui button">
                    <i class="text width icon"></i></button>
            </div>
            <br>
            <br>
            <div class="ui icon buttons">
                <button class="ui button">
                    <i class="pause icon"></i></button>
                <button class="ui button active">
                    <i class="play icon"></i></button>
                <button class="ui button">
                    <i class="shuffle icon"></i></button>
            </div>
                    
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </body>
</html>
Output: Example:

Different Size button

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>
        <div class="ui container">
            <h1>Different size buttons</h1>
            <button class="mini ui button">
                Mini
              </button>
              <button class="tiny ui button">
                Tiny
              </button>
              <button class="small ui button">
                Small
              </button>
              <button class="medium ui button">
                Medium
              </button>
              <button class="large ui button">
                Large
              </button>
              <button class="big ui button">
                Big
              </button>
              <button class="huge ui button">
                Huge
              </button>
              <button class="massive ui button">
                Massive
              </button>
                    
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
        </script>
    </body>
</html>
Output: You can run these examples by clicking on Run on IDE.

Next Article
Semantic-UI Button Types

I
iamsahil1910
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox