Bear Blog webring buttons

Bear has a 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.

Preview

Webring buttons, four styles: pill, rounded, dashed, and ghost

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 {
  margin-block-start: 1.5rem;
  text-align: left;
}

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

.webring-pill {
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
  border-radius: 99px;
}

.webring-rounded {
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
  border-radius: 6px;
}

.webring-dashed {
  border: 2px dashed color-mix(in srgb, var(--text-color), transparent 78%);
  border-radius: 0;
}

.webring-ghost {
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
}

@media (hover: hover) {
  .webring-pill:hover,
  .webring-rounded:hover,
  .webring-dashed:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
    border-color: color-mix(in srgb, var(--text-color), transparent 55%);
  }

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

@media (prefers-reduced-motion: reduce) {
  .webring-link {
    transition: none;
  }
}

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

Want more? Check out the full Bear Blog library.