Stacks Image 6

Button Press 2

Power filled clickable buttons.

Button Press 2

These power filled buttons are all about speed, responsiveness, and subtle stylish designs.

Overview.

Built with absolute simplicity of use firmly in mind. It could not be easier or faster to create website buttons.

  • There are four carefully crafted button styles, are both subtle in design and bang on trend.
  • Buttons can be set to realign in the parent container at different device sizes.
  • You see a split view in edit mode shows both normal and hover state.
  • Each button has 4 preset sizes to aid deployment speed and ease.
  • This is a javascript free stack, and only the required optimised CSS exported for a minimum footprint.

Instant download.

Version : 1.0.2

Responsive : Yes

First released : 17/6/2016

Last Updated : 8/8/2016

Stacks V 3.0 or greater.

Live demo.

You can see a few live examples of the stack in action below.

You can produce all these button styles and more, in any colour you like. It takes just a few simple clicks using the Button Press 2 stack.

Small

Regular

Large

Extra Large


Small

Regular

Large

Extra Large


Small

Regular

Large

Extra Large


Small

Regular

Large

Extra Large


Hover Me

Hover Me

Hover Me

Hover Me


Small

Regular

Large

Extra Large



Responsive alignment

You are able to have the button align differently on different device sizes. As the screen width changes, so the button will re-align to the choice you made for each of the device sizes (Desktop, Tablet, and Mobile). You also have the ability to re-define the breakpoint that define these devises if you wish.

Demo set for: Center on Desktop - Left on Tablet - Right on Mobile


Occupy the full container width

With a single click, your button can occupy the full width of the container you place it inside. Here we have a couple added to a responsive 2 column stack.

Fully Expanded

Fully Expanded

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Link
Set the link for the button here, using Rapidweavers built in links panel that will open when you click "set link".
Button Type
There are 4 button types to choose from:

  • Bootstrap
  • Flat
  • Ghost
  • Modena

Each are available in 4 sizes :

  • Small
  • Regular
  • Large
  • Extra Large
Button Font
You are able to override the themes font from a selection of web safe fonts here if you wish.
Button Text
This is the text that will appear on the button. You can use Font Awesome HTML here as well.
Square Corners
When selected, the rounding is removed from the button.
Bold Button Text
Makes the text of the button bold in weight.
Button Base
Two colour pickers for the button background colour in normal and hover states.
Button Text
Two colour pickers for the button text colour in normal and hover states.
Expand to Full Width
When selected the button will fill 100% of the width of the container you placed it inside.
Alignment Controls
Simply click the position you would like the button to appear on each of these device sizes.
You can redefine the breakpoints that define the sizes of these devices if you wish.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Not only do you get visual feedback of the style of button you have selected, but you also see the button in a split view, showing the colours you selected for both the normal and hover states of the button.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™