Spice up Call-To-Action buttons

Hot Tip #04 is to spice up your Call-To-Action (CTA) buttons.

Remember: you’re excited to share your product or service!

🚫 Click Here
🚫 Sign Up

Too bland.

Use actionable phrases.

✅ Request a call from our agents
✅ Discover the wonders of science
✅ Unlock creativity for only $19

Let’s take a look at what the big dogs are using:

Space using ratios

Hot Tip #28 is to space using ratios.

For example, set a base size of 8px, then define your padding using multiples of 8:

Tiny gaps = 8px
Small gaps = 16px
Medium gaps = 32px
Big gaps = 64px

Using ratios aligns your content better and tightens up Landing Page design.

8-Point Grid System – Very good visual breakdown by Elliot Dahl of the benefits an 8pt system give a design. Includes 8px ratio infographics.

Hot Tip #41 is to code your own social share buttons.

Embedding a crowd of social share buttons adds unnecessary requests to your Landing Page load.

I’d vote for removing them completely. If you must have them, consider hard-coding the buttons with fun pre-composed text.

Mamma mia! This free set of restaurant icons by @iconfinder is deeelicious 🍕

Share Link Creator – My go-to-tool for populating social share links in my Landing Pages. I used this tool for the links below this. Kick off the Tweet link to see it in action.

Hot Tip #56 is to increase the contrast of your CTA button text.

A common design mistake by beginners is keeping the global link color the same throughout Landing Page elements.

This can lead to low contrast CTA buttons:

By integrating a text color that’s highly contrasted against the button background, you can create striking CTA buttons:

Contrast for Mac – great tool I use to ensure my text color contrast is within accessibility guidelines.