Resources

Button

Overview

The Button section is a simple method of adding a button to your page.

Settings

As with all section, the Button section includes the Standard Section Options such as padding/margin, background options and etc.

  • Button URL: Enter the URL for the address you wish to the button to navigate to.
  • Button Text: Input text to label the button.
  • Button Color: Select from several color schemes.
  • Button Size: Select from four sizes such as Standard, Large, Small and Mini.

Examples

Standard

Large

Small

Mini

Shortcode

The Button section can be inserted into a page, post or widget using the shortcode below. This is used as a quick reference and we highly recommend including a unique ID.


[pl_section section="button" id="Enter_Unique_Id_Here"]

Classes

We recommend using your own custom classes via the Additional Styling Classes option to customize sections. However, you can use the classes below as a quick reference or in your own styles, if you prefer to use the default class(es) instead of your own.


/* pl-sn-button class is assigned to the <section> element */
.pl-sn-button { ... }

/* Assigned to a <div> that wraps the buttons. */
.pl-btn-wrap { ... }

/* The main styling class for the button,
 * colors are overided by the button color classes
 */
.pl-btn { ... }

/* Button colors */
.pl-btn-ol-white { ... } /* Outline White */
.pl-btn-ol-black { ... } /* Outline Black */
.pl-btn-default { ... } /* Default */
.pl-btn-primary { ... } /* Blue */
.pl-btn-success { ... } /* Green */
.pl-btn-warning { ... } /* Orange */
.pl-btn-inverse { ... } /* Black */
.pl-btn-danger { ... } /* Red */
.pl-btn-link { ... } /* Link i.e. no bg color, just text */
.pl-btn-info {... } /* Light Blue */

/* Button sizes */ 
.pl-btn-lg { ... } /* Large */
.pl-btn-st { ... } /* Standard */
.pl-btn-sm { ... } /* Small */
.pl-btn-xs { ... } /* Mini */