How to Add Button to Slider Revolution?

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

Be it calls to action, parts of the user interface, or simple links, buttons are an essential element of any website. When designed with care and attention, they can help guide users through your site and improve the overall experience of your visitors. But in addition to knowing how to design an effective button, you also need to consider where to place your buttons. And the above-the-fold slider is always a good choice for placing important website elements. Therefore, in today’s tutorial we will show you how to add buttons to Slider Revolution. This can be done by either adding a button shortcode to the slider or creating a new button layer. We’ve already covered how to add shortcodes to Slider Revolution in a dedicated article, so if you’re interested in adding other shortcodes to your sliders, be sure to check this out.

You can also check out our video on how to add buttons to Slider Revolution:

Or if you prefer a step-by-step text guide, read on.

Adding Button Shortcode to Slider Revolution

Adding a button to your slider via shortcode is pretty simple. But before adding the actual code to your slider, I suggest you ‘create’ a button on a test pageand make sure everything looks the way you want it to.

For the purposes of this tutorial, eventful WordPress theme. We will create our button with the theme’s custom button shortcode.

inside the shortcode general settings, you can see that we have various customization options. How exactly you set the options for your button will depend on the theme you are using and the button style you are targeting.

This theme’s button is also Design options so you can ‘design’ the button yourself. You can do choose initial and accent colors font size, font weight, and font size for the button’s background, text, and border customize button margin and padding.

After defining your button’s appearance, switch to Text edit mode and copy the button shortcode. In my case the code [mkdf_button size=”small” text=”Purchase” target=”_blank” icon_pack=”” font_weight=”700″ link=”https://evently.mikado-themes.com/” color=”#ffffff” hover_color=”#ffffff” background_color=”#356bf8″ hover_background_color=”#0141f5″ border_color=”#356bf8″ hover_border_color=”#0141f5″ font_size=”13″ padding=”16px 46px”].

Now go to your slider and add a simple text layer. back then paste the code you copied to that layer earlier. It will appear as text in your working frame.

But when you save your slider and navigate to the page it should display correctly where this button is placed. Now you can play with the button’s position, reaction and animation.

Adding a Button Layer to the Slider Revolution

Maybe you are not a fan of the design of the buttons that come with your theme. Or the theme may not have a pre-designed button shortcode. Whatever the reason for your decision to create your own button in Slider Revolution, now you will learn exactly how to do it.

First, add a button layer to the slider working frame.

When you add the button, it will appear as text in your working frameuntil you customize it.

On the right side of the screen, you will find many pre-designed button stylesand you can choose the one that suits your website style.

Besides these common button styles, you can also use something a little different, such as play buttons.

Also, you can add a shadow effect on your button.

After defining the basic button style, you can go and change its advanced settings to better match the look of your website.

Customizing the button is the same as customizing any layer other than the Layer Options. Than changing the initial appearance of the button change how it displays on hover, add animations and soften.

And that’s all. Once you’re done setting up your button layer, you can work on more advanced options like responsiveness and incoming animation. Here is an animation example from the Evently theme:

To learn more about animating your slides and making your layers responsive, be sure to check out our full Slider Revolution article series.

As a result

Whether you create your button as a shortcode or through a Slider Revolution layer, you can easily customize its styles and experiment with different texts to see what works best for your website visitors. But now that you’ve learned these two extremely simple ways to add buttons to Slider Revolution, you can be sure that each of your slides has a call-to-action or a link to let your visitors know what you want them to do. or specify which page on your site you want them to visit later.