Adding and Configuring Button Layers
Learn all about how to add and control the appearance of button layers in this guide.
Table of Contents
- Add a New Button Layer
- Topic Recap: Controlling Button Content
- Controlling Button Appearance
- Topic Recap: Adding Simple Links
Add a New Button Layer
To add a new button layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor. go to the Add Layer button in the top toolbar, then click the Button item:
At first the layer will be unstyled and hence will look like plain text, so the next step is to choose a style from the selection the appears on the right side of the interface:
Click the style you like most. It will then apply itself to the button layer and change the button text:
Topic Recap: Controlling Button Content
The controls for the text that appears on button layers are the same as those for text layers, all of which we’ve covered on previous manual pages.
Take a look at our guide on “Editing Text” to learn how to modify basic text content.
And read Additional Text Content Options to learn about setting button toggle text, adding icons or meta data, adding line breaks, and controlling alignment.
Controlling Button Appearance
Buttons have two states for which an appearance needs to be defined:
1) The default state, which is how the button usually appears, and
2) The hover state, which is how the button appears when a mouse is hovering over it:
It’s typical in web design to make these states look different so there is visual feedback that lets visitors know an element is interactive.
Default State Appearance
The default state appearance is defined in the layer’s Style sub-section under the Layer Options tab:
Once again, the options here work in the same way as those of text layers, so you can learn about them from previous manual pages.
Our basics guide on “Editing Text” will teach you how to:
And our Additional Text Styling Options guide will teach you about:
- Additional font styling options such as line height, letter spacing and others
- Styling background colors and images
- Styling borders
- Controlling spacing through margin and padding
Hover State Appearance
The hover state appearance is not controlled in the Style sub-section of the Layer Options tab. Rather, it is defined in the Hover sub-section instead:
The specific panels of note for defining hover appearance are the Hover sub-section‘s Style and Filter panels.
Hover Style Panel
In the Style panel you’ll find a collection of styling options, (all described in the topic recap guides linked to above):
- Text Color
- Text Decoration
- BG Color
- Border Color
- Border Style
- Border Size
- Border Radius
Any changes you make to these options will override the button’s default style while a visitor is hovering their mouse over the button.
If you want to completely clear any hover styling just click the Reset Style button:
Filter Panel
The Filter panel provides a quick and easy shortcut for making great looking hover styles:
Filters apply a visual effect to the entire layer all at once. There are three filters available:
Blur
Sets the number of pixels by which to blur the layer:
Brightness
Sets the percentage by which to shift the brightness of the layer. 100% is default brightness. Increasing the percentage brightens the button and decreasing the percentage darkens it.
For example, 150% makes the layer 50% brighter than default:
Grayscale
Sets the percentage by which to reduce the amount of color in the layer. 0% represents full color and 100% makes the layer completely grayscale / black & white:
Topic Recap: Adding Simple Links
Once you have your button setup and styled the way you like, you’ll likely to want to make it interactive.
The most common way to make a button interactive is to add a simple link action to it. To learn how to do that you can check out the How to Add a New Link section in our guide on basic link editing.
We’ll also be covering how to setup more advanced actions later in the manual.
Next: Shape Layers
Shape layers are super handy for adding decorative elements, color modifications, and for creating predictable, reusable layout containers for images.
Learn how to put shape layers to work in the next guide on Adding and Configuring Shape Layers.
