Custom Buttons Quick Start
Updated over a week ago

The Custom Buttons Site Page Templates Collection gives you a set of new button styles that command attention and give your site an enhanced appeal. You can use this collection with other Site Page Templates Collections or optionally replace default primary and secondary buttons styles on specific pages

How to use Custom Buttons with SPT Collections

For complete control over button style on a section by section basis, you will want to pair a button style with a SPT section

  1. Make sure you have the core Site Page Template section added to your page

  2. Add one or more sections from the Custom Button SPT Collection to the page giving each a unique SPT Button ID

  3. Open the Custom Button section and copy the SPT Button ID. For example you if you added the "Bubbly" button than the default SPT Button Id is Bubbly. You can also update the settings for colors, text and style. It may be easier to do this part when you can see the button in action in the next steps

  4. Add a section from any SPT that includes buttons. For example Text And Mega Media, then open the section settings until you see the setting for the button that you wish to change style on.

  5. Change the Button Color Style setting to: SPT Button ** and then paste in the same SPT Button ID into the SPT Button ID field

  6. Save the page and then view the actual page outside of Site Builder

  7. Change the Custom Button settings as needed. Each button may have different settings to control it's style

NOTE: Since you cannot hover over section buttons or click on them within Site Builder, you may not see all of the effects that the buttons has. For this reason you really need to see the button in action on an actual page. You can always create these button styles on a custom page and then use the Site Builder section copy feature and copy all of the applicable sections over to another page if you would rather not effect a "live" page

How to use Custom Buttons with standard Thinkific sections

If you would like to change the style of buttons inside of other Thinkific standard sections, you can add a Custom Button section and then simply name the SPT Button ID as Primary or Secondary to instantly change all Primary or Secondary button styles on that page.

  1. Add a Custom Button section to the page

  2. Open the settings and change the ID to "Primary" if you want to change all primary button styles for the current page. Change it to "Secondary" if you want to change all secondary button styles on the page

  3. Save the page and then view the actual page outside of Site Builder

  4. Change the Custom Button settings as needed. Each button may have different settings to control it's style

NOTE: By making your Custom Button ID as "Primary" or "Secondary", will change all SPT Buttons and Thinkific Buttons on the current page only that have been set to use either Primary or Secondary as the style. For section specific control, you will have to use SPT Sections instead.

Custom Buttons included with Custom Buttons SPT Collection

The following sections will be added to your site when you install this SPT Collection and will become activated when you add the core Site Page Templates section to your page as well. Be sure to view the Site Page Templates Getting Started Guide.

This has a nice animation effect that starts with a slight border and then fills in the background. There are a few options for the direction of the fill as well as options for colors, shape and text.

This button has a nice animated multicolor border effect when the button is hovered over. Looks great on dark background sections. There is complete control over color, shape and text.

This button creates a nice animated "bubble" effect when it is clicked. There is complete control over color, shape and text.

This button has a nice animation effect that splits the background into three colors. There is complete control over color, shape and text.

This is your basic button settings that mimic the Theme buttons settings. A great choice for simply changing the Primary or Secondary buttons on the page. There is complete control over color, shape and text.

This button has a line that appears to the side of the text that rotates and turns into the background color when the button is hovered over. There is complete control over color, shape and text.

This button has a simple sliding hover effect . You can choose if you want the slide to come from the right or left. There is complete control over color, shape and text.

This button has a variety of animated fill effects when the button is hovered. There is complete control over color, shape and text.

This button has a pulse animation when you hover over it. There is complete control over color, shape and text.

This button places a line above and below the text and streatches out when you hover over it.

Did this answer your question?