Stacks Image 100

EasyButtons Stack

create awesome buttons with cool CSS3 animations

The EasyButtons Stack is a very versatile stack to create all sorts of buttons1: in a (responsive) grid, with animations on hover, with animated Font Awesome icons… It also combines very well with the TippyTitle Stack (see demo #2a for an example).

1 for the purists among us: in fact, this stack creates links that look like buttons

Whether you need good looking call to action buttons, add to cart buttons or even a menu (with disabled buttons when needed – see the demo pages for an example), with the EasyButtons Stack it’s a breeze to make them. And: there are plenty of options to make them look like you have in mind.

Demos
Here are a few buttons to give you an idea. However, this stack has so many possibilities that it’s almost unfeasible to sum them all up here, so please visit the demo pages to see more of the many possibilities.

Usage
In the EasyButtons Stack you can set the direction, alignment and width of all buttons in the stack (fig.1). Buttons are added in the stack by clicking on the plus button at the bottom (fig.2). The rest of the settings are done in the stacks for the individual buttons (fig.3).

Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
  • when the visitor has JavaScript disabled in his browser, the buttons will show and work, but only the border, text, background colors and border radius will change on hover
  • not all combinations of options lead to nice results; those combinations are described in the stack’s info pane (fig. 1)
  • the stack doesn’t do a very good job in Edit mode

Background

This stack is partly based on IanLunn’s Hover.css.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
EasyButtons info pane
fig. 2
EasyButtons HUD
fig. 1


EasyButton HUD
fig. 3
© 2012-2019 Marathia Web Design | Contact