Webring buttons

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.

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 all available Bearming add-ons.

Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩