Button Design Examples

Styling Options

Button Nav takes button styling from your bootstrap based theme, so the button colour, size and borders provided by your theme are simply inherited by Button nav. Here the theme is Elemental, so the buttons fit in with any other buttons on an Elemental/Cloneamental theme's site.

In the button design dialog you can choose to override theme colours or corners (or both) with bootstrap defaults. Below you can see some of the variations and sizes this provides.

A button can have an optional Font Awesome icon left or right, and the icon can be enlarged, rotated, flipped and animated.

Buttons can also have an optional background image and text colour. When selected, these override whatever the theme defaults provide.

Button Behaviours

Buttons can also have behaviours. Any button can be aligned with an edge of the window. Further behaviours depend greatly on what the button is used with.

For example, with an AutoNav dropdown, available behaviours are the dropdown direction and alignment. You can see that in the navigation button to the left and the stack display button to the right.

With lightbox templates and dropdowns for content or stacks, you need to specify the width of the lightbox content. You can see a lightbox in the "Don't Overdoo It" warning at the top of this page. 


Don't overdoo it !

Button Nav can be used to create masses of button designs and behaviours for many blocks directly and for any block once it is in a stack or pulled with Universal Content Puller. Don't be tempted to go berserk and use everything all on one page. Certaily don't make your own pages look like the examples crammed into this page!

Plan on a few complementary designs and behaviours and use them consistently throughout your site. That way, users will quickly learn your conventions and appreciate the help Button Nav provides for navigation and supplementary content.

This is a content block with a Button Nav lightbox template.