Button Layer

You can find the Button layer in the Slide Editor.

Content

General

Label

This will be the text on your button.

Full width

Your button can be either as wide as your text needs it to be, or with this option it can be as wide as the layer is.

No wrap

If it's turned on, and your text is longer, than the width of your layer, it will still stay in one row. If it's turned off, the text will go to the next rows.

Link

Link

You can put a link on the layer. Learn more about the link options at the Link documentation.

Target window

Specifies where to open the linked document.

• Self: Opens the linked document in the same frame as it was clicked (this is default link behavior).
• New: Opens the linked document in a new window or tab.
• Parent: Opens the linked document in the parent frame.
• Top: Opens the linked document in the full body of the window.

Rel

The rel attribute specifies the relationship between the current document and the linked document.

Icon Pro

Icon

You can show an icon beside the button's text. The same icons are available what you can find at the Icon layer.

Size

The font size of the icon.

Spacing

The distance between the icon and text

Placement

Whether the icons shows up on the left or right side of the text.

Advanced - Pro

CSS class

You can add a custom css class, that will be applied to the button layer.

Style

Learn about the typography options at the Layer Typography & Design documentation.

Animations

Learn about the animations at the Animation documentation.

Frequently Asked Questions

How to create a button with rounded corners?

Use the Border Radius option at the Style tab.

Button without border radius (left, green color) and button with 50px border radius (right, blue color)

How to make the button behave better responsively?

You can make the button have better responsive behavior by using em paddings instead of px .

The em paddings will be smaller if you reduce the font size on tablet and mobile, so the button will look less large.

If your button has lots of text, it could also worth setting the left and right padding to 0, turning on the Full Width option and using Max Width to set the size of the button.

How to trigger JavaScript codes with the Button layer?

In the Pro version of Smart Slider, you can trigger JavaScript codes at the Animations tab, as you see in this documentation.

In the Free (and Pro) version, at the Style tab you can add a CSS Class to any layer.

You can use this class, to identify the button within your code:

jQuery('.example').click(function(){
    alert('test');
});

If you don't know where to write your JavaScript code, you could write it to the slider settings -> Developer tab -> JavaScript callbacks.