Try MaxiBlocks for free with 500+ library assets including basic templates. No account required. Free page builder, theme and updates included. Start now
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.
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.
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.
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.
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.
<button>
or <a>
? If it takes you somewhere else, use <a>
. If it does something without leaving the page, use <button>
. Easy peasy.Hover effects are like a wink—they let you know you’ve found something clickable. When done right, they’re pure magic.
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.
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.
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.
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.
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.
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.
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.
Heat maps show you 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.
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.
No one likes waiting. CSS buttons load faster than image-based ones, and less code means fewer headaches. Keep your code lean.
Different buttons for different actions is confusing. Keep your button design consistent throughout your website so you always know where to click.
Here’s a quick brainstorm of button styles you could try. Some are classic, some are a bit wild, but all have their place:
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:
These templates can give you an idea of what works and help you get started fast.
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.