Buttons

Updated 4 years ago by Wizzi

Example Button

A fully edited button that you would use in your page.

<a class="fluid ui red massive button" href="#" target="_blank">Learn More</a>

Sizes

A button can have different sizes

<a class="mini ui button" href="#" target="_blank">
  Mini
</a>
<a class="tiny ui button" href="#" target="_blank">
  Tiny
</a>
<a class="small ui button" href="#" target="_blank">
  Small
</a>
<a class="medium ui button" href="#" target="_blank">
  Medium
</a>
<a class="large ui button" href="#" target="_blank">
  Large
</a>
<a class="big ui button" href="#" target="_blank">
  Big
</a>
<a class="huge ui button" href="#" target="_blank">
  Huge
</a>
<a class="massive ui button" href="#" target="_blank">
  Massive
</a>

Colors

A button can have different colors

<a class="ui red button" href="#">Red</a>
<a class="ui orange button" href="#" target="_blank">Orange</a>
<a class="ui yellow button" href="#" target="_blank">Yellow</a>
<a class="ui olive button" href="#" target="_blank">Olive</a>
<a class="ui green button" href="#" target="_blank">Green</a>
<a class="ui teal button" href="#" target="_blank">Teal</a>
<a class="ui blue button" href="#" target="_blank">Blue</a>
<a class="ui violet button" href="#" target="_blank">Violet</a>
<a class="ui purple button" href="#" target="_blank">Purple</a>
<a class="ui pink button" href="#" target="_blank">Pink</a>
<a class="ui brown button" href="#" target="_blank">Brown</a>
<a class="ui grey button" href="#" target="_blank">Grey</a>
<a class="ui black button" href="#" target="_blank">Black</a>

Social

A button can be formatted to link to a social website

<a class="ui facebook button" href="#" target="_blank">
  <i class="facebook icon"></i>
  Facebook
</a>
<a class="ui twitter button" href="#" target="_blank">
  <i class="twitter icon"></i>
  Twitter
</a>
<a class="ui google plus button" href="#" target="_blank">
  <i class="google plus icon"></i>
  Google Plus
</a>
<a class="ui vk button" href="#" target="_blank">
  <i class="vk icon"></i>
  VK
</a>
<a class="ui linkedin button" href="#" target="_blank">
  <i class="linkedin icon"></i>
  LinkedIn
</a>
<a class="ui instagram button" href="#" target="_blank">
  <i class="instagram icon"></i>
  Instagram
</a>
<a class="ui youtube button" href="#" target="_blank">
  <i class="youtube icon"></i>
  YouTube
</a>
<a class="ui whatsapp button" href="#" target="_blank">
  <i class="whatsapp icon"></i>
  WhatsApp
</a>

Fluid

A button can take the width of its container.

<a class="fluid ui button" href="#" target="_blank">Fits container</a>

Vertical Buttons

Groups can be formatted to appear vertically

<div class="ui vertical buttons">
  <a class="ui button" href="#" target="_blank">Feed</a>
  <a class="ui button" href="#" target="_blank">Messages</a>
  <a class="ui button" href="#" target="_blank">Events</a>
  <a class="ui button" href="#" target="_blank">Photos</a>
</div>

Disable a button from opening in a new tab

Simply remove target="_blank" from the copied button code and your button will open in the same tab.

Before:

<a class="ui button" href="#" target="_blank">Click Here</a>

After

<a class="ui button" href="#">Click Here</a>

How did we do?