Skip to content

Adding Buttons To Sliders

Buttons are a great way to add clickable elements to your sliders. Below are ways to add them depending on the slider plugin you are using.

Adding Buttons To Revolution Sliders

The easiest way to add a button to a Revolution Slider is to create one using the built-in Layer General Parameter.

Revolution Slider Method 1

First add a new layer. Then in the Layer General Parameters click the options to Insert Button. Select the button typer you would like to add. This will add the basic code you need for your button. Just replace the # with your URL, and the Red Button placeholder with the text you want to use for your button.

Revolution Slider Buttons

Revolution Slider Method 2

Your second option is to create a button from scratch using a custom layer content style. We only recommend this method if you are somewhat comfortable with CSS since you will have to make some tweaks on your own.

To do this add a new layer and type in the code for your text with a link. Because you are adding a link, the default link styling will be added. To remove this add style=”text-decoration:none; color:#fff;” to your code (replacing the #fff that we used for white with any hex color you would like to use).

Revolution Slider Custom Button

Then select a style from the drop-down, or edit a style to make customizations for rounded corners, fonts, colors, text sizing and more.

Adding Buttons To Layer Sliders

To add a button to a Layer Slider you can simply use the built-in classes.

First add a new layer and type your button name in the Content tab. Next add the URL you want your button to go to in the Link tab.

Add Your Button Text

Then add the classname color-button in the Attributes tab, followed by a color. This is also where you should add your link title.

Add The Button Class

You can find the list of colors and their styling in the info box below.

a.color-button.grey{ background-color: #bbb; }
a.color-button.black { background-color: #333; }
a.color-button.blue { background-color: #3f90bd; }
a.color-button.orange { background-color: #ff6040; }
a.color-button.orange { background-color: #ff6040; }
a.color-button.gold { background-color: #ffaa33; }
a.color-button.green { background-color: #87bf17; }
a.color-button.purple { background-color: #a73df2; }
a.color-button.teal { background-color: #00b3b3; }
a.color-button.pink { background-color: #f261c2; }
a.color-button.brown { background-color: #804b35; }
a.color-button.red { background-color: #F73936; }
a.color-button.rosy { background-color: #EA2487; }
a.color-button.white { background-color: #fff; color: #444; }
Back To Top