Button Builder

WordPress Plugin


Create custom buttons for your site, content, and sidebar! Hundreds of style possibilities!
Author Fuselight Media, LLC
Envato Profile Link

Features


Integrated Shortcode Builder Create buttons from either the WordPress editor or using the standalone shortcode builder located under Appearence > Button Builder.
Button Importer Need to edit a button? The same editor used to build your button also accepts the same code for editing!
Multiple Code Types You can use standard WordPress shortcodes, HTML, or PHP codes.
HTML5 / CSS3 Works on all the latest browsers, properly tagged and contains transitions.
Component Styles Mix and match classes to create different button styles, effects, and animations.
Shortcut Links Optional add-ins for link URL's that when rendered through a shortcode or PHP function, automatically add in the WordPress link.
Font Awesome Ready Button styles developed using the fantastic Font Awesome icon set.
4 Button Sizes X-Small, Small, Medium, and Large with the ability to override and set your own size.
12 Base Colors Light, Tan, Dark, Blue, Green, Red, Orange, Yellow, Pink, Purple, Black, and White.
CSS3 Icon and Button Animations We have effects ranging from rotations, flips, scaling, and skewing.
Hundreds of Combinations This isn't about using a subset of button styles, this is about making any type of button you need. Perfect for blogging, content creation, or general website building.

Installation


1. Extract the "FLM-Button-Builder-Plugin.zip" file onto your desktop.
2. Log into your WordPress admin panel and go to Plugins > Add New > Upload.
3. Select the extracted file and press the "Install Now" button.
4. Activate the plugin on your way back to the plugins panel.
5. See Appearence > Button Builder to configure your plugin settings.
6. Install Complete!

Button Options


Generated buttons are link tags with associated features like a link URL, title, custom ID, etc.

Button setup has been divided into a series of tabbed sections: Details, Styles, Customize, and Icons.

Two additional tabs are also available: Extras (Containing samples and reset buttons) and Import (Allowing for button code to be imported into the builder for editing).

Button Details


Link Address - Wherever your button is pointed to. This can be entered in by hand or by using some of the shortcut links available in the dropdown on the right of the field.

Shortcut links look a little funny in the editor, but when used as part of a shortcode or PHP function call, are created directly form WordPress link calls. This is designed for buttons that link to WordPress pages and makes sure they won't go to a dead page if the site URL changes.
Shortcut Links
{HOME-SITE} home_url()
{HOME-NETWORK} network_home_url()
{ADMIN-PANEL} admin_url()
{LOGIN} wp_login_url()
{LOGOUT} wp_logout_url()
{REGISTER} wp_registration_url()
{LOST-PASSWORD} wp_lostpassword_url()
{DIR-INCLUDES} includes_url()
{DIR-CONTENT} content_url()
{DIR-STYLESHEET} get_stylesheet_directory_uri()
{DIR-TEMPLATE} get_template_directory_uri()

Link Target - Denotes how the link should react when clicked.
Link Targets
Default Not Targeted
Self Same Window
Blank New Window
Parent Parent Frameset
Top Top Document in Window

Link Title - Set a title for people to see when they mouseover the link.

Link Rel - The relationship of the link to the document being linked to.
Link Relationships
None No releationship. This is default.
Alternate Links to an alternate version of the document.
Author Links to the author of the document.
Bookmark Permanent URL used for bookmarking.
Help Links to a help document.
License Links to copyright information for the document.
Next The next document in a selection.
NoFollow Links to an unendorsed document, like a paid link.
NoReferrer Specifies that the browser should not send a HTTP referer header.
Prefetch Specifies that the target document should be cached.
Prev The previous document in a selection.
Search Links to a search tool for the document.
Tag A tag (keyword) for the current document.

Custom ID - A quick way to add in your own custom ID to the button.

Custom Class - A quick way to add in your own custom class to the button.

Button Text - Set the main text for the button.

Button Small Text - When enabled, use this to set the small text in the button.

Button Styles


Sizes - These determine the button height and the padding and spacing of elements inside of the button.
Sizes Height Font Size
X-Small 24px 12px
Small 34px 16px
Medium 46px 20px
Large 54px 26px

Button Color - Color styles affect the background or color of the button depending on the effect.

Available Colors: Light (Silver), Tan, Dark, Blue, Green, Red, Orange, Yellow, Pink, Purple, Black (Outline), White (Outline)
Colors Background Border
Light #EEEEEE #AAAAAA
Tan #E2DDC9 #A9A182
Dark #444444 #111111
Blue #4DA3E5 #216DCB
Green #74CE39 #2F8B13
Red #FB7457 #DC4A4A
Orange #FCB230 #EC7F1A
Yellow #FCE630 #E3C417
Pink #FE7FD1 #E57EC3
Purple #E583E5 #8C51BB
Black Transparent #000000
White Transparent #FFFFFF

Text Color - The same options can be applied to change the color of the inner text of the button.
Colors Text
Engrave Derived from text-shadow applied to shade-specific text color.
Light #666666
Tan #A19D7F
Dark #444444
Blue #2C7CDD
Green #42A715
Red #D13F3E
Orange #ED801B
Yellow #D4B920
Pink #E552B0
Purple #8C51BB
Black #000000
White #FFFFFF

Button Style - Select from a handful of different styles for your button to use.
Button Styles
Default A classic gradient-based style with a border on it.
Flat A non-gradient flattened version of the button with a border.
Border A border-only version of the button with a transparent background.
Outline Combines a border and box-shadow effect to make the border appear larger.

Button Style Icon - When an icon is used, these styles can set it apart from the main text.

Note - Make sure these styles align with the side the icon is on.
Button Icon Styles
None No additional styles added, icon sits next to the main text and/or small text.
Lines Left Adds semi-transparent lines to the left side, separating the icon.
Lines Right Adds semi-transparent lines to the right side, separating the icon.
Mask Left Adds semi-transparent lines and a translucent background to the left side.
Mask Left Adds semi-transparent lines and a translucent background to the right side.

Button Style 3D - The 3D effect applies a custom box shadow to the button based on it's color and also used an active style to create a pressing down effect.

Button Hover - Hover styles affect the background or color of the button on hover depending on the effect. Use hover for the outline style button or choose from a bordered or flat effect.

Rounded Corners - Ranges from 1-25.

Box Shadow - Ranges from 1-10 measuring shadow intensity.

Text Shadow - Ranges from 1-10 measuring shadow intensity.

Opacity - Ranges from 100-0 measuring button opacity.

Opacity Hover - Ranges from 100-0 measuring button opacity on hover.

Animate Icon - A selection of CSS3 based animations that can be applied to the icon on hover. Effects include: Rotate (90, 180, 360 Degrees), Zoom, Loop, Grow, Shrink, Skew, and Flip (L-R, T-B).

Animate Button - A list of CSS3 based effects that can apply to the entire button on hover. Effects include: Rotate, Grow, Shrink, and Flip (L-R, T-B).

CSS Transitions - Denote whether CSS3 transition effects should be applied. This affects the button on hover. Some existing hover effects already use these; this effect is useful in the case it is needed for alternate effects.

Button Customizations


Font Family - Specify your own custom font family (used inline) or select from the shortcut class list composed of general web-safe font families (used as a button class).
Font Family Shortcuts
{CLASS-Arial} Arial, Helvetica, sans-serif
{CLASS-Arial-Black} "Arial Black", Gadget, sans-serif
{CLASS-Comic-Sans-MS} "Comic Sans MS", cursive, sans-serif
{CLASS-Impact} Impact, Charcoal, sans-serif
{CLASS-Lucida-Sans} "Lucida Sans Unicode", "Lucida Grande", sans-serif
{CLASS-Tahoma} Tahoma, Geneva, sans-serif
{CLASS-Trebuchet-MS} "Trebuchet MS", Helvetica, sans-serif
{CLASS-Verdana} Verdana, Geneva, sans-serif
{CLASS-Book-Antiqua} "Book Antiqua", Palatino, serif
{CLASS-Georgia} Georgia, serif
{CLASS-Times-New-Roman} "Times New Roman", Times, serif
{CLASS-Courier-New} "Courier New", Courier, monospace
{CLASS-Lucida-Console} "Lucida Console", Monaco, monospace

Font Size - Denote a custom font size here. Any unit can be used, but specifying a unit (px, em, etc.) is required.

Icon Placement - Icons default to the left side, but can be placed on the right ("Icon Right") or if only an icon is to be used in the button ("Icon Only") or removed entirely ("No Icon").

Small Text - Small text is turned off by default, but can be placed on the left or right side of the button between the main text and the icon.

Button Float - If you need to float the button to the left or the right on the page, use this option. Defaulted off.

Button Width - Overrides the existing style on the button. Any unit can be used for this, but a unit (px, em, etc.) is required. This is a handy setting in the instance you want several buttons to be more consistent in width. It should be noted that icons with text will pull to the left, but icons only or text only will center.

Button Height - Overrides the existing style on the button. Any unit can be used for this, but a unit (px, em, etc.) is required. Use this in conjunction with the line height option to create larger buttons.

Button Line Height - Overrides the existing style on the button. Any unit can be used for this, but a unit (px, em, etc.) is required. Use this in conjunction with the button height option make sure your text centers vertically.

Custom Text Color - Enable this option to set an inline style and override the existing font color.

Custom Background Color - Enable this option to set an inline style and override the existing background color. Please note that this will create a flat style button in the process.

Custom Border Color - Enable this option to set an inline style and override the existing border color.

Custom Border Width - Ranges from 1-25 and overrides the existing border width. Use this in conjunction with button height and button line height so that you button doesn't become overwhelmed.

Button Line Height = Height - ( Border Width x 2 )

Custom Border Style - Override the default solid border with an available style. Options Include: None, Dashed, Dotted, Double, Groove, Inset, Outset, Ridge and Solid.

Icons


A full selection of the latest icons form Font Awesome are available in this tab. You can search and filter the list using controls on the top, then select your icon as needed.

To clear a selected icon, either reload the page or popup or turn the icon placement option to "No Icon" in the customize tab.

WordPress Editor


If the "WordPress Editor" integration in the plugin is activated, you should see a blue button with a "B" on it in the WordPress visual editor when creating or editing posts or pages.



Creating a New Button


To generate a new button, click the blue button on the panel and a popup window will appear with the configuration controls.

Enter the details for the button and select "Insert into post" on the bottom right hand side of the popup and your new shortcode will appear.

Editing A Button


You have a couple of options to edit a button in the WordPress visual editor:

Import code into the popup: Click the "B" button on the panel and then select the import to copy and paste in already generated button code (Shortcode, HTML, or PHP).

Select & Edit: A much easier way to edit code already in the post is to select it, then click the "B" button to automatically import it in and begin modifying the button right away. Make your changes, press the insert button and your code should be replaced in the visual editor.



Support


Having trouble with the plugin?
Please message us via our Envato Profile for help or see the product page for additional support information.

Have a suggestion?
If you have any feedback or suggestions on improving the plugin, please let us know via our Envato Profile.

Credits


Font Awesome 4.6.1 - Font icons used in button creation and demos.