One thing Foundation does really well, is buttons. We are about to cover all the options you have with buttons. So, let's get started.
You can turn any <a>
or <button>
tag into a Foundation button by adding the button
class. So, on or around line 135, on your left-hand side column and under vcard
, let's add the following:
<a href="#" class="button">Button</a>
You will see a simple blue button. You also have the ability to set a few sizes for the button. You need to keep the button
class, but you can put another class such as tiny
, small
, medium
, large
, and expand
in the code. Let's try this out by adding a large
class to our button:
<a href="#" class="button large">Button</a>
You will see that the button gets larger; try others. When you try to expand the button, it will take up the entire width of the column that it is in.
The next thing you might want to do is add rounded corners to our button, so go ahead and add the radius
class and then try adding...