Skip to content

Like + Share + Bookmark Bar

A copy-paste social share component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Social ShareHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-shr-lsb">
  <button class="nuda-shr-lsb__btn nuda-shr-lsb__btn--like">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
    <span>482</span>
  </button>
  <div class="nuda-shr-lsb__sep"></div>
  <button class="nuda-shr-lsb__btn">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    <span>64</span>
  </button>
  <div class="nuda-shr-lsb__sep"></div>
  <button class="nuda-shr-lsb__btn">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
    <span>Share</span>
  </button>
  <div class="nuda-shr-lsb__sep"></div>
  <button class="nuda-shr-lsb__btn">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
  </button>
</div>
CSS
.nuda-shr-lsb {
  display: inline-flex;
  align-items: center;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-shr-lsb__btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  background: none;
  border: none;
  color: #777;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.nuda-shr-lsb__btn:hover {
  background: rgba(255,255,255,.05);
  color: #cfcfcf;
}

.nuda-shr-lsb__btn--like {
  color: #ff6b6b;
}

.nuda-shr-lsb__btn--like:hover {
  background: rgba(255,107,107,.1);
  color: #ff6b6b;
}

.nuda-shr-lsb__sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

How to use Like + Share + Bookmark Bar

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More social share components

← Browse all NudaUI components