Button links

Text links can have a button appearance.

To give a text link the appearance of a button, select the link’s Advanced tab and enter the text below in the Stylesheet Classes field.

Button link

NOTE: The Forms Manager app Submit button colour is specified in the Design settings.

Button style Stylesheet Classes
button button amber
button buton black
button button blue
button button bluegrey
button button brown
button button cyan
button button deeporange
button button green
button button grey
button button indigo
button button lime
button button orange
button button pink
button button purple
button button red
button button teal
button button yellow
button button white

 

Making buttons bigger or smaller

You can combine the styles above with the big and small classes:

button amber big will produce button

button amber small will produce button

 

Applying a raised effect

To apply a raised effect to a button – similar to the Google Material Design style – use the raised class:

button green will produce button whereas button green raised will produce button

Note: you can also apply a raised effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App.

 

Creating hollow buttons

To create a hollow button – one with a transparent background and a black border around it, instead of button use simply hollowbutton:

hollowbutton will produce button

You can create a reverse (white) hollow button, useful for instance on “hero” images where the hollow button is overlaid on a photo or dark background. The hollowbuttonreverse class can be used for that:

hollowbuttonreverse will produce button

Note: you can also apply a hollow effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App. In that case, the border colour will match whichever one you pick for the “Submit” buttons there.

 

Creating circular buttons

It’s also possible to create small circular buttons. Use the circle class for that, and keep the labels to 1 or to letters or numbers:

button cyan circle will produce Y and of course button cyan circle raised will produce Y

 

Top of page