Button shortcode

Displays a button to your web page. It gives you extreme flexibility in how you present your button elements - from simple and unobtrusive call to action, to gigantic attention grabber. You can choose the size, color, position and padding of text and icon, the shape and size of the background, the type of the link, and even set the button to 100% width of the column.

Examples of the button shortcode usage

We tried to cover all the basic and
advanced uses for the image shortcode

A couple of examples of simple button styles and hover effects

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.

A couple of examples of simple button styles and hover effects

A couple of louder buttons on a colored background

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.

Basic settings for button shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Set title

Define the text content of the button.

Define title size

You can set a custom size for the content text. Note that horizontal and vertical padding are separate values, described below.

Title color and hover

You can define a custom color of the title in default and hovered state using the color picker, or set the hex code manually.

Define icon size

You can set a custom size for the icon. This is a value separate from the title size.

Background color and hover

You can define a custom color of the title in default and hovered state using the color picker, or set the hex code manually.

Vertical and horizontal padding

You can separately define the vertical and horizontal padding of the button. Experiment with different sizes and shapes.

Add URL

Set a URL destination to the button.

Title aligment

You can set the vertical alignment of the content to left, right or center of the column. The background will act accordingly unless set to "full width".

Choose an icon

You can include an icon representing the specific call to action. Frontend Builder uses a wide variety of icon fonts - from Font Awesome, or our own Creative and Alternative icon sets.

Icon Aligment

You can set the vertical alignment of the content to left, right or inline.

Define icon size

You can set a custom size for the icon. This is a value separate from the title size.

Advanced settings for button shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

Full width

You can set the width of the button to encompass the full width of the column. You can achieve a great variety of button styles by experimenting with button and column sizes.

Fill

This box controls the transparency of the fill color. Uncheck this if you want to get the bordered button style.

Choose the link type

You can open a standard link, in new tab, a lightbox image or a lighbox iFrame

Dimensions of the Lightbox iFrame

You can set custom dimensions for the Lightbox iFrame link type

Hover icon

You can easily change the hover icon. We are offering you 3 icon galleries with Fbuilder

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Round

Check this box if you want your button to have round edges, to better incorporate it in your design style.

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode