Semantic-UI | Buttons - GeeksforGeeks

28 May, 2020
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:
<!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.
<!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
<!-- 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
<!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
<!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
<!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.
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript