Bear webring buttons

19 Mar, 2026

Bear has a new feature that lets you add a link to a random Bear blog or post. A lovely way to help readers discover more of what the Bear community has to offer.

The links are:

Blog: https://bearblog.dev/discover/random-blog/
Post: https://bearblog.dev/discover/random-post/

Below are a few button styles you can use to add them to your site. Pick the one that fits your vibe, or mix and match for blog and post.

This add-on is built for the Bearming theme. If you're using a different theme, add the Bearming tokens to make it work with your setup.

Preview

Discover another Bear blog →

Discover another Bear post →

How to use

Pick a style and copy the markup below.
Paste it where you want the button to appear, for example at the end of a post or in the footer.
Copy the styles and add them to your theme.

Markup

<!-- Pill -->
<div class="webring">
  <a href="https://bearblog.dev/discover/random-blog/" class="webring-link webring-pill">Discover another Bear blog →</a>
</div>

<!-- Rounded -->
<div class="webring">
  <a href="https://bearblog.dev/discover/random-blog/" class="webring-link webring-rounded">Discover another Bear blog →</a>
</div>

<!-- Dashed -->
<div class="webring">
  <a href="https://bearblog.dev/discover/random-post/" class="webring-link webring-dashed">Discover another Bear post →</a>
</div>

<!-- Ghost -->
<div class="webring">
  <a href="https://bearblog.dev/discover/random-post/" class="webring-link webring-ghost">Discover another Bear post →</a>
</div>

Styles

/* Webring buttons | robertbirming.com */
.webring {
  margin-block-start: 1.5rem;
  text-align: left;
}

.webring-link {
  display: inline-block;
  padding: 0.85em 1.2em;
  font-weight: 600;
  font-size: var(--font-small);
  color: var(--link);
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}

.webring-pill {
  border: 1px solid var(--border);
  border-radius: 99px;
}

.webring-rounded {
  border: 1px solid var(--border);
  border-radius: 6px;
}

.webring-dashed {
  border: 2px dashed var(--border);
  border-radius: 0;
}

.webring-ghost {
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface);
}

@media (hover: hover) {

  .webring-pill:hover,
  .webring-rounded:hover,
  .webring-dashed:hover {
    text-decoration: none;
    background: var(--surface);
    border-color: var(--muted);
  }

  .webring-ghost:hover {
    background: color-mix(in srgb, var(--text) 10%, var(--bg));
  }
}

If you want the button centered, simply change text-align: left to text-align: center.

Happy discovering!

Want more? Check out the Bear library.