<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
/>
<
style
>
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>Geeksforgeeks</
h1
>
<
strong
>Semantic UI Button Group Variations</
strong
>
</
center
>
<
br
><
br
>
<
div
class
=
"container"
>
<
div
>
<
strong
>Vertical Buttons:</
strong
>
<
div
class
=
"ui vertical buttons"
>
<
button
class
=
"ui button"
>Feed</
button
>
<
button
class
=
"ui button"
>Messages</
button
>
<
button
class
=
"ui button"
>Events</
button
>
</
div
>
</
div
>
<
br
>
<
div
>
<
strong
>Icon Buttons:</
strong
>
<
div
class
=
"ui icon buttons"
>
<
button
class
=
"ui button"
>
<
i
class
=
"like red icon"
></
i
>
</
button
>
<
button
class
=
"ui button"
>
<
i
class
=
"pause green icon"
></
i
>
</
button
>
<
button
class
=
"ui button"
>
<
i
class
=
"share blue icon"
></
i
>
</
button
>
</
div
>
</
div
>
<
br
>
<
div
>
<
strong
>Labeled Icon Buttons:</
strong
>
<
div
class
=
"ui vertical labeled icon buttons"
>
<
button
class
=
"ui red button"
>
<
i
class
=
"like icon"
></
i
>
Like
</
button
>
<
button
class
=
"ui green button"
>
<
i
class
=
"play icon"
></
i
>
Play
</
button
>
<
button
class
=
"ui blue button"
>
<
i
class
=
"shuffle icon"
></
i
>
Shuffle
</
button
>
</
div
>
</
div
>
<
br
>
<
div
>
<
strong
>Mixed Group:</
strong
>
<
div
class
=
"ui green buttons"
>
<
button
class
=
"ui labeled icon button"
>
<
i
class
=
"left chevron icon"
></
i
>
Previous
</
button
>
<
button
class
=
"ui button"
>
<
i
class
=
"play icon"
></
i
>
Play
</
button
>
<
button
class
=
"ui right labeled icon button"
>
Next
<
i
class
=
"right chevron icon"
></
i
>
</
button
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>