Adding a button to TopBar

In Joe's Foundation website in the menu (TopBar), on the right side there is a Buy Now button on the far right of the menu. We have had many people ask how this is done, so this tutorial will show you how.

It is very easy to do. Just take this HTML code

<button class="secondary">Buy Now</button>

Now, you really do not need all of that code, so lets break down the code and explain it. You could just use this and it would work as well:

<button>Buy Now</button>

This will give you the button with the Primary color that is set in the Site Styles stack. You can set the class in the original code to any of the colors that are listed in the Site Styles stack window, see below:

So an example of making a button with the color of Alert, you would use this

<button class="alert">Buy Now</button>

will give you a button like this:

There are some other classes you can add to the button, they are as follows:

<!-- Size Classes -->
class="button tiny"
class="button small"
class="button disabled"
class="button large">
class="button expand"
<!-- Radius Classes -->
class="button round"
class="button radius"

This code can be used anywhere in a Foundation project file that you can add code (some examples would be an HTML stack or the paragraph stack). You can apply more than one class as well, for example this

<button class="alert round">Buy Now</button>

would give you a button like this:

Hope this helps you understand how to add buttons, not just to TopBar but to any where you want in a Foundation for RapidWeaver project!

Now go forth and make your websites great!