O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Buttons

Buttons can be big, small, colored, rounded, dropdown, split, and grouped. You need a button on your website? Foundation has the classes for it in its button components.

Remember labels? A button is similar to a label with an action behind it.

Regular buttons

Foundation supports the <button> element and the button class. Most of the time, you can use one or the other, and it will have the same effect.

Other than the text in the button, the following will be identical:

<button>&lt;button&gt;</button>
<div class="button">&lt;div class="button"&gt;</div>
<span class="button">&lt;span class="button"&gt;</span>
<a href="#" class="button">&lt;a class="button"&gt;</a>

The following is the screenshot resulting from the preceding code:

Compared to labels, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required