<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
/>
<
style
>
button {
width: 150px;
}
.container {
width: 600px;
margin-left: 15%;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
class
=
"ui green"
>GeeksforGeeks</
h1
>
<
strong
>Semantic UI Button Types</
strong
>
</
center
>
<
br
><
br
>
<
div
class
=
"container"
>
<
div
>
<
strong
>Inverted:</
strong
>
<
button
class
=
"ui inverted purple button"
>Trash</
button
>
<
button
class
=
"ui inverted green button"
>Subscribe</
button
>
<
button
class
=
"ui inverted red button"
>Unsubscribe</
button
>
</
div
>
<
br
>
<
div
>
<
strong
>Labeled Icon:</
strong
>
<
button
class
=
"ui left labeled icon button"
>
<
i
class
=
"left arrow icon"
></
i
>
Previous
</
button
>
<
button
class
=
"ui labeled icon button"
>
<
i
class
=
"pause icon"
></
i
>
Pause
</
button
>
<
button
class
=
"ui right labeled icon button"
>
<
i
class
=
"right arrow icon"
></
i
>
Next
</
button
>
</
div
>
<
br
>
<
div
>
<
strong
>Icon:</
strong
>
<
button
class
=
"ui icon blue button"
>
<
i
class
=
"cloud icon"
></
i
>
</
button
>
<
button
class
=
"ui icon button"
>
<
i
class
=
"bed icon"
></
i
>
</
button
>
<
button
class
=
"ui icon yellow button"
>
<
i
class
=
"fire icon"
></
i
>
</
button
>
</
div
>
<
br
>
<
div
>
<
strong
>Labeled:</
strong
>
<
div
class
=
"ui labeled button"
tabindex
=
"0"
>
<
div
class
=
"ui red button"
>
<
i
class
=
"heart icon"
></
i
> Like
</
div
>
<
a
class
=
"ui basic left pointing label"
>
2,048
</
a
>
</
div
>
<
div
class
=
"ui left labeled button"
>
<
a
class
=
"ui basic right pointing label"
>
2,048
</
a
>
<
div
class
=
"ui button"
>
<
i
class
=
"user icon"
></
i
>Follower
</
div
>
</
div
>
<
div
class
=
"ui left labeled button"
>
<
a
class
=
"ui basic right pointing label"
>
1,048
</
a
>
<
div
class
=
"ui icon blue button"
>
<
i
class
=
"fork icon"
></
i
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>