Semantic-UI | Buttons
Last Updated :
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=
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=
</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=
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=
</script>
</body>
</html>
|
Output:
You can use a lot of other colors.
Example: Inverted Button
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
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=
</script>
</body>
</html>
|
Output:
Example:
Social Media Button
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
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=
</script>
</body>
</html>
|
Output:
Example:
Icon Button
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
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=
</script>
</body>
</html>
|
Output:
Example:
Different Size button
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
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=
</script>
</body>
</html>
|
Output:
You can run these examples by clicking on Run on IDE.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...