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 Atomik, so the buttons fit in with any other buttons on an Atomik/Bootstrap 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. 

 

Buttons linking to pages

The examples below all use the Button Nav block and link the button directly to the main Button Nav page

Default
Standard Corners
Bootstrap colours
Bootstrap
Image Background
Animated icons
Rotated icons
No Icon !
Text colour
Bigger icons
Big buttons
Small buttons

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.

Buttons opening panels, dropdowns and overlays

Now some examples of Button Nav templates attached to blocks, so the block opens in a dropdown, lightbox or slide panel.

Houses on a hillside. 1499px x 1067px.

Houses

Houses on a hillside.
1499px x 1067px.
The iconic Golden Gate. 1600px x 1067px.

Bridge

The iconic Golden Gate.
1600px x 1067px.
In these shoes? Kirsty MacColl would have approved. 1600px x 1067px.

Shoes

In these shoes? Kirsty MacColl would have approved.
1600px x 1067px.
In amongst the bushes. 1600px x 1066px.

Plants

In amongst the bushes.
1600px x 1066px.
In London its the Underground or the Tube. In Europe it is the Metro. 1600px x 1067px.

Subway

In London its the Underground or the Tube. In Europe it is the Metro.
1600px x 1067px.
Sunset in the city. 1600px x 953px.

Sunset

Sunset in the city.
1600px x 953px.
View settings
Sidebar menu

Anything in a stack

Button Nav includes a template for the core stack display so you can make any stack you like dropdown from a button. Some ideas:

  • Contact information and maps
  • Form
  • I-frames
  • Video player

Here we have a core YouTube video block playing my introductory video for Button Nav.

Button Nav in Stacks

You can even have Button Nav buttons in stacks. Here we have a content block with a Button Nav template within a stack that is pulled in with a Button Nav template. To help make it pop out, we have used the option for the dropdown background to give it some colour, but with a little bit of opacity so you can see what is behind it.