Booking buttons that work: text, color and placement

An invisible booking button is the most expensive mistake on a hotel site. Not a slow loading time, not poor photos, not missing reviews. A guest who wants to book and can't quickly see how to do it goes back to Booking.com. That booking costs you 15 to 25 percent commission, and it was preventable.

Why the booking button so often gets it wrong

Most hotel sites are built with attention to atmosphere, text and photos. The booking button is added later as a technical afterthought. The result is a button that sits in the menu bar, same color as the rest of the navigation, with text like "Reserve" in a typeface that doesn't stand out.

Guests don't search. They scan. They move their eye across the page looking for something they recognize as "here I can book". If it's not there immediately, they don't scroll longer, they close the tab.

Three things determine if a CTA (call to action, the button that invites action) works: the text, the color and the placement. All three have to be right. Perfect text in the wrong place delivers nothing. A striking color with vague text also doesn't.

The text: what's on the button

This is the area where most hotels win the most, because standard button texts on hotel sites are almost universally poor.

"Check availability" works so well because it matches what the guest is doing at that moment: seeing if your hotel is available on their dates. It asks nothing, it offers something. Once the guest is in the booking module, it takes over.

"Book direct and save" only works if you actually offer something in return. A 5 percent discount without tax, a free drink on arrival, or flexible cancellation the platform doesn't offer. Say "save" when the price is the same as Booking.com and you damage credibility. Put the advantage next to the button and how you make it credible is covered in trust and urgency on your booking page.

Avoid generic text like "Click here" or "Go to booking page". Those texts don't tell the guest what they get. They slow down the decision instead of speeding it up.

The color: standing out without shouting

The booking button should be the only place on your page where the accent color appears. If that color also shows up in your logo, footer and subtitles, it's no longer striking.

The rules are simple:

• Pick a color with enough contrast to the background. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for text on a button. That's not esthetic choice but readability.
• Use the accent color only for the booking button and maybe one highlight. Not for headings, not for links in text.
• Dark sites: light buttons (white, yellow, orange). Light sites: dark or bright buttons (green, red, dark blue).
• Make sure the text on the button itself is readable. White text on a light yellow button is unreadable.

Orange converts well on many sites, but not because orange on its own works. It converts because most hotel sites have a neutral or cool color palette, and orange as the only warm color stands out there.

The placement: above the fold and then again

Above the fold is what the visitor sees without scrolling. On an average laptop screen that's about 600 to 700 pixels high. On mobile less. If the booking button only appears after scrolling, it's invisible to a large part of your visitors.

The button should appear three places:

1. In the navigation bar, always visible. Sticky navigation (that scrolls along) keeps the button constantly in view. The button in navigation can be slightly smaller, but still needs to stand out by color.
2. Above the fold, in the first screen. Not hidden in a corner, but central or prominent to the right, on or just under the mood images.
3. After each room description or price section. The guest who read a room that fits them wants to book at that moment. If the button isn't in view then, they scroll further and lose the impulse.

On longer pages (with multiple room types, package offers or arrangements) the button can appear four or five times. That's not spam, that's thoughtful design.

Mobile: bigger than you think

On mobile nobody clicks with a cursor, but with a thumb. The touch zone of an average thumb is large, but its precision is low. A button that looks good on desktop is often too small on phone or sits too close to other buttons.

Follow these minimums:

• Minimum button height: 48 px
• Minimum button width: 120 px, preferably wide to the edge of the screen
• Space from other clickable elements: at least 8 px

Also check whether the button is still visible in your mobile navigation. On many sites the booking button disappears into a hamburger menu on mobile. Then the guest has to tap twice to find it: once to open the menu, once on the button. Every extra step costs bookings.

Common mistakes in a row

• Button same color as navigation. The guest sees no action element, just a second menu link.
• Text "Reserve" or "Book now" without context. Too definite for guests still looking.
• Button only at the bottom of the page. Half your guests don't scroll that far.
• On mobile the button disappears into the hamburger menu. Visibility drops sharply.
• Button color doesn't change on hover. A button that changes on hover confirms it's clickable. Without that effect it sometimes looks like a flat design.
• Different button texts throughout the page. "Book now" at top, "Reserve" halfway, "Check availability" at bottom confuse the guest. Pick one text and stick with it.

A/B testing on a small site

Formal A/B testing, showing two variants at the same time to different visitors, requires a lot of traffic. For most small hotel websites that's thousands of visitors per variant, per variant separately. You probably won't hit that.

What you can do: a sequential test. Use two weeks of variant A (current button text and color), then two weeks of variant B (changed text or color), and compare the percentage of visitors who click through to the booking module. No statistical proof, but it gives you direction. If variant B consistently scores better, keep it.

Improve your chances of a fair result by changing only one thing at a time. Text or color, never both in the same test.

The button is one part, not the solution

A good booking button increases your direct bookings, but it doesn't stand alone. The guest first has to believe that booking with you is safer and cheaper than via the platform, then they have to get through a form that doesn't scare them away. A perfect button above a page full of doubt delivers little.

So look at your site as a chain. The photos and price promise get the guest to click, the button captures that impulse, the form completes it. Fails one link, the booking still leaks to Booking.com. Changing button text from "Check availability" to "Book direct and save" doesn't help if the guest drops off midway through a slow form or lacks trust.

To tackle the whole chain instead of single elements, start with conversion optimization for your hotel site. There you see how button, trust, form and price together set your booking percentage, and which order brings the most gain.

What you can do now

Go to your own site and check three things: Is the booking button visible without scrolling? Does it have a color that appears nowhere else on the page? And does it have text that invites rather than pushes away?

If one of the three isn't right, you have a concrete improvement you can make today.

Want to go deeper: read the five mistakes on 80 percent of Dutch hotel sites for the bigger picture, or check nine errors in your booking form for what happens after the guest clicks the button. Want to review your whole site for what works and what doesn't, what a hotel website minimally needs helps you along. An overview of all articles around direct bookings is in the website conversion hub. Calculate what better conversion brings with the savings calculator, or have it implemented via website building.