Zurb Foundation Framework has different kinds of button styles. You can customize it based on your needs.

Different buttons:

HTML Code

	 
<a href="#" class="button [tiny small large]">Tiny Button</a>
<!-- Color Classes -->
<a href="#" class="button [secondary success alert]">Alert Button</a>
<!-- Radius Classes -->
<a href="#" class="button [radius round]">Radius Button</a>
<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>
<!-- Expand Class -->
<a href="#" class="button expand">Expanded Button</a>

Output

Split Buttons and Drop down buttons

Split button have button with drop down list. It is created by using dropdown plugin.

HTML Code

<a href="#" class="button split">Split Button <span data-dropdown="drop"></span></a><br>
<ul id="drop" class="f-dropdown" data-dropdown-content>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Output

• Link 1
• Link 2
• Link 3

Next Lesson > Foundation Navigation