About this snippet

Encourage sharing by keeping social icons accessible as users read your content. This sticky sidebar uses SVG icons and features a smooth slide-out animation on hover for a polished look.

Size
2.5 KB
Uses
HTML, CSS
Loads
Nothing external
Views
341

Collections

Related snippets

<div class="share-bar">
  <a href="#" class="share-icon facebook" aria-label="Facebook">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
  </a>
  <a href="#" class="share-icon twitter" aria-label="Twitter">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
  </a>
  <a href="#" class="share-icon linkedin" aria-label="LinkedIn">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
  </a>
  <a href="#" class="share-icon email" aria-label="Email">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
  </a>
</div>
<div style="height: 1000px; padding: 20px; margin-left: 60px; font-family: sans-serif;">
  <h2>Scroll the page</h2>
  <p>The social bar stays fixed on the left.</p>
</div>
.share-bar {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  z-index: 100;
}
.share-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.share-icon:hover {
  width: 65px;
}
.share-icon svg {
  stroke: #fff;
  fill: none;
}
.facebook { background: #3b5998; }
.twitter { background: #000000; }
.linkedin { background: #0077b5; }
.email { background: #ea4335; }

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save