How to create a blog hop button from scratch

A blog hop button is a visual doorway to a shared theme: readers tap it, land on a host’s page, and follow the trail to other participating blogs. Even when the original hop lived on Instagram or Vine, the badge still needs to make the next step obvious.

Creating one from scratch gives you control over its wording, colours and accessibility. It also avoids a generic badge that disappears into a crowded sidebar or loses its purpose when copied between blogs with different templates.

For Australian readers, a phone-first design is essential. People in Sydney, Melbourne and regional towns often meet a post while scrolling on a phone during a coffee break or train commute. A large, legible button survives that setting better than a delicate emblem.

The finished asset can work as a plain link, a branded image or a hybrid of both. Whichever format you choose, the destination should remain clear, the touch area should be generous, and the design should suit both blog posts and social previews.

Set the button’s purpose

Begin by deciding where the button leads. A central landing page is usually the most practical option because it lets you update participating blogs without replacing the artwork on every site. If the hop has only three or four stable participants, linking directly to the first post can also work.

The Pink Elephant’s design inspiration gallery shows how a hop can carry a recognisable visual theme, from ikat and nautical stripes to neon accents and monograms. Pick one direction for the badge so participants can repeat it without making every host’s version look identical.

Design the wording and artwork

A button needs a simple hierarchy: the hop name first, the action second, and the host’s identity third. A monogram can be especially useful in a small badge, and monogram history traces how that symbol moved from royal signatures to modern decorative branding.

A compact message checklist keeps the badge readable:

Use one clear action, such as “Join the design hop”.
Keep the hop name to four words or fewer.
Show the host’s name in smaller type.
Avoid tiny sponsor wording inside the button.
Check spelling before exporting the artwork.

A matching asset checklist prevents export problems:

Work at 1200 × 630 pixels for social sharing.
Export a PNG with a transparent background.
Keep an SVG version for crisp scaling.
Add the favicon to the host list.
Test the artwork against white and dark backgrounds.

Create the accessible link

Make the badge an ordinary HTML link rather than a picture that only appears to be clickable. The destination belongs in the href attribute, while the visible label tells visitors what will happen. This gives keyboard users, screen readers and people with reduced dexterity the same route through the page.

<a class="blog-hop-button" href="/blog-hop">
  Join the design hop
</a>

If the badge contains artwork, retain the real text inside the link and mark the image as decorative. An empty alt value prevents screen readers from announcing the same instruction twice, while aria-hidden="true" reinforces that the image carries no additional information.

For icons, textures and layout options, free design resources can provide useful starting material. Check each item’s licence before including it, particularly when the hop uses the artwork commercially or asks participants to reproduce the badge.

Format	Best fit	Main benefit	Important consideration
Plain-text link	Minimal blogs and email footers	Fastest and easiest to maintain	Make the action and destination clear
Image-led badge	Strongly themed visual hops	Creates an immediate visual identity	Never remove the underlying link
Image with text	Branded blogs and social previews	Combines personality with clarity	Keep decorative imagery hidden from screen readers

Style it for screens and print

Once the markup is correct, CSS can handle colour, spacing and interaction states. A 44-pixel minimum height gives Australian mobile users a comfortable target, while a visible focus outline ensures the button remains clear for keyboard navigation.

.blog-hop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border: 2px solid #16324f;
  border-radius: 999px;
  background: #fff3f7;
  color: #16324f;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.blog-hop-button:hover {
  background: #ffe0ec;
}

.blog-hop-button:focus-visible {
  outline: 3px solid #d6336c;
  outline-offset: 3px;
}

For an ikat or coastal palette, the ikat wallpaper inspiration demonstrates how a bold repeat can work on an iPad screen. Use it as a colour reference rather than placing a busy pattern behind small text, and retain the solid colour as a reliable fallback.

Test the experience carefully

Test the button on iPhones, Android phones, tablets and desktop screens. Check that the text remains readable at 200 per cent zoom, that the button works without hovering and that the destination opens correctly. A keyboard-only pass should reveal whether the focus outline is visible, while a screen reader should announce a short and meaningful link label.

If email promotes a paid product or service, the Australian Spam Act 2003 requires consent, sender identification and a functional unsubscribe option. A successful button can increase sign-ups, but it does not replace compliant email practices or permission to send promotional messages.

If the hop collects names or email addresses, check whether the Privacy Act 1988 and Australian Privacy Principles apply to your operation. Collect only the information needed to administer the hop, explain its purpose at the point of collection and limit who can access participant details.

Publish, connect and measure

Place the finished button in a visible position on the host page, the first participating post and any shared landing page. Use the same wording and artwork across those locations, while allowing each host to add its own monogram or border. Consistent navigation matters because readers move between blogs that may use unrelated fonts, colours and layouts.

Physical samples can help at a craft market or design event, but compare Australian-dollar prices, GST-inclusive quotes and delivery times from local print shops and craft marketplaces before ordering. Digital files should also include ready-made PNG and SVG versions so hosts can resize them without losing sharpness.

Track participation with a simple tagged link and record clicks by placement rather than collecting unnecessary personal data. Check destinations regularly, replace broken links and document the artwork files for future hosts. A clear, quick and consistently branded button keeps the hop easy to enter and easy to pass on.