Style Global Buttons for Your Author Website

Introduction

So far in this course we have added primary and secondary buttons to our style guide page using the default settings. Breakdance does a solid job styling our buttons out of the box but using global settings we can change those defaults, if we want to, to have our buttons match our author brand.

By default Breakdance assigns all buttons with the PRIMARY style so we don’t need to manually change that for the primary button in the style guide but I recommend you do. Not just with the button in the style guide but with all the primary buttons you assign to the website.

Edit the global primary button

From the Breakdance editor editing the Style Guide Page.

• I’ll click on the dot dot dot menu 
• and select Global Settings 
• then buttons. 

The first thing we see is we have options to edit or primary and Secondary buttons.

I like the hover effect on the secondary buttons and want to do something similar when visitors hover over the primary button. 

• I’ll click on the edit icon for the primary button.

Even though by default Breakdance uses the Brand colour as the background for the primary button colour we need to confirm that here as part of the setup for the hover effect.

• Change the button background colour to the Brand palette choice.
• Next I’ll switch on the outline option which activates the colour and width boxes for the button outline. 

This makes the text disappear but we’ll fix that soon. 

• I’ll set the Outline colour to BRAND and the width to 1 pixel. This is a fixed width so no need for me to use rem.
• I’ll active NO FILL ON HOVER so the button background is transparent. 

Now when I hover over the primary button it transitions to a transparent background with a brand colour outline and matching colour text.

Next we need our normal state text back.

• Click on the edit icon beside typography
• Change the colour to the alt text swatch we set up in the colour palette in an earlier lesson. 

This looks good until I hover over the primary button and now our on hover button text has disappeared. That’s an easy fix. 

When I I HOVER over the colour field label in Button Typography I get a screen icon for responsive settings and a pointing finger to edit the hover style. 

• I’ll click on the edit hover style icon 
• and set that to the brand colour. 

Now when I hover the primary button I get a fully readable transition.

The final change I want to make to the global primary button is the corners. The default for Breakdance buttons are square corners. There is a also a round preset. I like soft corners on a button but not fully rounded. 

• To get the effect I want I click on CUSTOM 
• and set the radius to 8 pixels. I’m using pixels as the radius is fixed.

I’m not going to add any special effects or an icon so I’ll click the x to close the editor for the primary button.

Secondary Button

In contrast the only thing I need to do to the secondary button for this build is change the corners to custom and set the radius to 8 pixels.

Summary

With a few clicks we have styled our global primary and secondary buttons to be mirror images of each other. These styles will apply to ALL the buttons across our author website. If we want to change them we can do so easily with the global settings tool in Breakdance.