Manual

The fundamentals of using Slider Revolution.

Search
Generic filters

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

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:

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.

Adding and Configuring Button Layers