Playground Buttons PBG-03

The complete guide to website buttons: history, design, and making them convert

I. Introduction

If you’ve ever clicked a button online (which you obviously have), you’ve felt the make-or-break power of a tiny rectangle on your screen. Buttons might be small, but they’re the gateway to getting you where you want to go: buying a product, subscribing to a newsletter, or just feeling good about smashing that CTA. This guide’s all about what makes buttons tick and how to make yours work so well they basically beg for a click. We’ll cover a bit of history, show you how to design ’em, and even sprinkle in some personal stories—so you get why buttons are kind of a big deal.

II. The history of website buttons

A. From text to clicks: the old-school web

Back in the old days of the internet (like early 90s), buttons weren’t a thing. Just links, mostly blue and mostly underlined—not exactly the stuff of dreams. Clicking meant finding a link and hoping it wouldn’t take 20 minutes to load. As the web grew up, designers realised they needed something more… clickable… to get people around. Enter the humble button.

B. Birth of the button: early graphical buttons

In the mid-90s, buttons started to pop up—clunky things that looked like actual buttons you’d find on a retro calculator. HTML and CSS got fancier, and buttons began to transform. Remember Flash? Those wild, animated buttons? The kind that wiggled around and had a “loading…” bar? Yeah, let’s forget those.

C. Today’s button vibe: simple and shiny

Fast forward, and buttons now are all about keeping it simple. Flat designs, material styles, and touch-friendly buttons that you can’t help but click. The trick is making them good-looking without trying too hard—nobody wants a button that’s trying too hard.

III. Designing website buttons

A. Button basics: keepin’ it simple

Alright, first off—how do you even make a button? If you’re starting out, it’s just some simple HTML like <button> or <a> with a bit of CSS to make it pretty. What’s important is not to overthink it.

• HTML & CSS basics: No need to make this rocket science. A button’s job is to say “click me” in a way that you don’t even have to think about. Add a background colour, some border-radius if you want it round, and maybe some padding. Boom—you’ve got yourself a button.
• When to use which tag: <button> or <a>? If it takes you somewhere else, use <a>. If it does something without leaving the page, use <button>. Easy peasy.

B. Hover effects: why hovering is where it’s at

Hover effects are like a wink—they let you know you’ve found something clickable. When done right, they’re pure magic.

• Colour changes: Classic. Make your button change colour slightly when you hover over it. A little lighter, a little darker—doesn’t matter, as long as it signals: “Hey, I’m clickable!”
• Transforms: A little “pop” when you hover is like giving you a nudge to click. Slight scaling or tilting gives the button a bit of life without going full circus.
• Animations: Not too much—we’re not making a cartoon here. Maybe a light shadow or a ripple effect if you’re feeling adventurous.

C. Responsive buttons: fingers matter

Nothing worse than tapping your phone and missing a button. Keep your buttons big enough for your thumbs (40-50 pixels wide). And make sure there’s space between them—accidentally opening something is just annoying.

IV. The science of getting clicks (a.k.a converting)

A. What “conversion” really means

If you want your button to convert, you want it to get clicked, right? But not just any click—the kind that makes you buy, sign up, or get interested in what you’re offering.

B. Colours that make people click

Ever wondered why “Buy Now” buttons are red or green? Colour psychology, mate. Red means urgency (buy now, or it’s gone!). Green means go—the classic “yes, let’s do this.” Whatever colour you pick, just make sure it stands out—nobody wants a button that blends in like a chameleon.

C. Button text: say what you mean

You want your button text to be clear and a bit bossy—”Sign Up Now” works way better than “Learn More”. You don’t want to think; you just want to click.

D. Create FOMO

Throw in some urgency. “Sign Up Before Midnight!” or “Only 3 Left in Stock!” makes you jump on it faster. The fear of missing out works wonders.

E. Test, test, and test again

A/B testing is where the magic happens. Change the colour, the text, or even where the button sits on the page. See what works and what doesn’t. Repeat until it’s perfect.

V. Where to put buttons for best results

A. Obvious places work best

Buttons should be obvious—you shouldn’t be hunting for it. Above the fold (before you scroll) is prime real estate. And if it makes sense, below some key content too.

B. Heat maps and all that jazz

Heat maps show where people click the most. If your button’s in a cold zone, move it. If you have to scroll forever, you’ll get bored and leave.

C. Button placement tips

• Near action points: Right after you’ve made a good argument for why someone should care, stick a button there.
• Make it float: Sticky buttons are great—the ones that follow you down the page. Never underestimate a good floater.

VI. More things to consider

A. Accessibility: don’t be a jerk

Buttons should work for everyone. That means making sure screen readers can identify them and you can tab to them without your keyboard flipping out. Don’t make someone with a disability feel left out.

B. Faster, faster!

No one likes waiting. CSS buttons load faster than image-based ones, and less code means fewer headaches. Keep your code lean.

C. Make all your buttons match

Different buttons for different actions is confusing. Keep your button design consistent throughout your website so you always know where to click.

VII. 20 styles for website buttons

Here’s a quick brainstorm of button styles you could try. Some are classic, some are a bit wild, but all have their place:

1. Flat buttons: No nonsense. Just the basics.
2. Ghost buttons: All outline, no fill.
3. Raised buttons: Add a shadow—makes it pop.
4. Floating action buttons: The ones that float—obviously.
5. Icon buttons: Add a little icon to show what it does.
6. Toggle buttons: Click it, it changes.
7. Dropdown buttons: Button that opens a menu.
8. Split buttons: A button that gives you two options.
9. Social media buttons: Connect, share, like—you get the point.
10. Call-to-action buttons: “Buy Now” or “Sign Up”.
11. 3D buttons: Make ’em look like they’re poppin’ off the screen.
12. Gradient buttons: A bit of colour fade never hurt.
13. Animated buttons: Small animation, big personality.
14. Neon glow buttons: A little retro, a lot flashy.
15. Outline buttons: Just a border, looks good on a dark background.
16. Pill-shaped buttons: Rounded to the max.
17. Square buttons: No frills, no curves.
18. Circular buttons: Great for icons and action triggers.
19. Material buttons: Google-style—flat, simple, but effective.
20. Glassmorphism buttons: Frosted glass effect—looks fancy.

VIII. Types of websites that can use a WordPress services page

WordPress is the go-to choice for all sorts of websites. Whether you’re a small business or a big agency, a services page can help you showcase what you do. Here are different types of websites that could make great use of a WordPress services page, along with button ideas that suit them:

• Health websites: Perfect for displaying medical services, appointment booking options, and detailed health information. For health websites, buttons like “Book Appointment Now” or “Get Health Tips” can be effective. Check out health website templates.
• Agency websites: Highlight your marketing, advertising, or creative services with a clean layout. Use buttons like “Request a Quote” or “See Our Work” to encourage interaction. Here’s an agency homepage template.
• Consulting websites: Show off your expertise, testimonials, and booking options for consultations. Buttons like “Schedule a Consultation” or “Get Expert Advice” can work well. See an example consulting homepage template.
• Photography websites: Offer different types of photoshoots, pricing, and portfolio galleries. Consider buttons like “View Portfolio” or “Book a Photoshoot” to drive conversions. Here’s a photography homepage template.
• Fitness websites: Ideal for displaying training packages, class schedules, and personal trainer bios. Buttons like “Join a Class” or “Get a Free Trial” can work wonders. Take a look at this fitness homepage template.
• Food and restaurant websites: Highlight your menu, reservation options, and special events. Use buttons like “View Menu” or “Reserve a Table” to get you interested. Check out the food and restaurant homepage template.
• Law firm websites: Present legal services, attorney profiles, and contact information clearly. Buttons like “Get Legal Help” or “Contact an Attorney” can prompt action. Here’s a law firm homepage template.
• Event websites: Promote event services, ticket options, and schedules. Use buttons like “Buy Tickets” or “See Event Details” to boost engagement. Take a look at this event homepage template.

These templates can give you an idea of what works and help you get started fast.

IX. Wrapping it up

Buttons might be small, but they hold a lot of power. Designing a good button means making it easy for you to do what you want to do. The right button—placed in the right spot, with the right message—can make all the difference. And hey, if you’re not sure what works, just keep tweaking it. The perfect button is out there—you’ve just got to click around a bit to find it.

For more help with WordPress websites, have a look at WordPress websites, WordPress website design, or Elementor alternatives. You can also check out WordPress website designer and WordPress website builders for more information.