PageFly - Button element

479 views 1

In this article, you will learn about the Button element in PageFly and how to use it.

About Button element

The Button element is one of the fundamental element of any page, mostly acts as a Call-To-Action for whatever goal you are trying to achieve on your page. You can use the Button element to redirect your visitor to any given URL, fire Google Analytics or Facebook pixel events, or download a file, etc.

Where Button element located

Button element offers 10 design variations with diverse stylings. We will continue to add more variations in the future.

Let’s start by dragging and dropping a variation to the layout and see how it can be configured.

Button element settings

Button element comes with several variables, which lets you edit the display and achieve the best performance of the Call-To-Action.

To start, select the Button element in Editor layout to see its settings.

General tab configuration of Button element

While the variables in General tab are specific for this element, the variables in Styling and Advanced tabs are common for all elements.

Read about variables in Styling and Advanced tab in this article.


Text The text to be displayed on the button. Button’s width will expand based on the length of this text.
Shape Make your button either Rectangle or Rounded
Style Default: No border and have background color

Plain: No border and no background color

Outline: Border and no background color

Show Icon Enable / Disable icon
Icon Position This variable is only available if Show Icon is enabled
ICON SETTINGS (only available if Show Icon is enabled)
Icon Pick the icon you want to be displayed on the button from a set of icons. We are using FontAwesome icons, feel free to take a look here.
Color Pick color for the icon
Size Adjust the size of the icon. The best size of an icon is any number divisible by 7 (e.g. 14px, 21px, 28px, etc.)
Icon Shape Pick the shape of the icon’s border (None, Square, Circle or Diamond)
Dimensions Adjust the dimensions of the icon’s border


Go To URL Insert an URL to the button. You can additionally assign 03 attributes including: “Top” (open the link in the full body of the window), “Self” (open the link in the same tab) or “New” (open the link in a new tab)


Google Analytics Fire the custom Google Analytics event name
Pixel Event Send pre-defined Facebook Pixel event (search, view content, add to cart, add to wishlist, initiate checkout, add payment inform, purchase, lead, complete registration, custom event)

Last but not least, sometimes you would want the button to function as an “add to cart” or “buy now” button. If that’s the case, use the Add To Cart button element instead.