About this snippet

Four rows of social media links for Facebook, X, LinkedIn, Pinterest, Reddit and WhatsApp. The first row is square icon tiles, the second puts the icon in a darker block beside the network name, the third is a rounded button with a darker strip along its bottom edge, and the fourth is a pill with the icon in its own rounded segment. Every button gets darker on hover, and the square tiles also enlarge their icon.

The icons come from the Font Awesome 6 brand set, loaded from cdnjs with an @import at the top of the CSS. Each network has one background class (.fb, .x, .in, .pi, .rd and .wa) that all four styles share, and the darker areas are semi-transparent black layers, such as rgba(0, 0, 0, 0.1), laid over that color, so adding a network takes only one new color. Reddit and WhatsApp use darker shades of their usual orange and green so the white text keeps a contrast ratio of at least 4.5:1.

The links point to # as placeholders, so replace them with your profile or share URLs. The icon-only tiles carry an aria-label so screen readers announce the network name, and every button shows an outline when it gets keyboard focus. Font Awesome 6.4.0 and older have no X icon, so keep the 6.7.2 version that the import loads.

Size
5.5 KB
Uses
HTML, CSS
Loads
cdnjs.cloudflare.com
Views
462

Collections

Related snippets

<!-- Style 1: square icon tiles -->
<div class="social-row">
  <a href="#" class="social-1 fb" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
  <a href="#" class="social-1 x" aria-label="X (Twitter)"><i class="fab fa-x-twitter" aria-hidden="true"></i></a>
  <a href="#" class="social-1 in" aria-label="LinkedIn"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a>
  <a href="#" class="social-1 pi" aria-label="Pinterest"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a>
  <a href="#" class="social-1 rd" aria-label="Reddit"><i class="fab fa-reddit-alien" aria-hidden="true"></i></a>
  <a href="#" class="social-1 wa" aria-label="WhatsApp"><i class="fab fa-whatsapp" aria-hidden="true"></i></a>
</div>
<!-- Style 2: icon block with a label -->
<div class="social-row">
  <a href="#" class="social-2 fb"><i class="fab fa-facebook-f" aria-hidden="true"></i><span>Facebook</span></a>
  <a href="#" class="social-2 x"><i class="fab fa-x-twitter" aria-hidden="true"></i><span>X (Twitter)</span></a>
  <a href="#" class="social-2 in"><i class="fab fa-linkedin-in" aria-hidden="true"></i><span>LinkedIn</span></a>
  <a href="#" class="social-2 pi"><i class="fab fa-pinterest-p" aria-hidden="true"></i><span>Pinterest</span></a>
  <a href="#" class="social-2 rd"><i class="fab fa-reddit-alien" aria-hidden="true"></i><span>Reddit</span></a>
  <a href="#" class="social-2 wa"><i class="fab fa-whatsapp" aria-hidden="true"></i><span>WhatsApp</span></a>
</div>
<!-- Style 3: raised buttons -->
<div class="social-row">
  <a href="#" class="social-3 fb"><i class="fab fa-facebook-f" aria-hidden="true"></i>Facebook</a>
  <a href="#" class="social-3 x"><i class="fab fa-x-twitter" aria-hidden="true"></i>X (Twitter)</a>
  <a href="#" class="social-3 in"><i class="fab fa-linkedin-in" aria-hidden="true"></i>LinkedIn</a>
  <a href="#" class="social-3 pi"><i class="fab fa-pinterest-p" aria-hidden="true"></i>Pinterest</a>
  <a href="#" class="social-3 rd"><i class="fab fa-reddit-alien" aria-hidden="true"></i>Reddit</a>
  <a href="#" class="social-3 wa"><i class="fab fa-whatsapp" aria-hidden="true"></i>WhatsApp</a>
</div>
<!-- Style 4: pill buttons -->
<div class="social-row">
  <a href="#" class="social-4 fb"><i class="fab fa-facebook-f" aria-hidden="true"></i><span>Facebook</span></a>
  <a href="#" class="social-4 x"><i class="fab fa-x-twitter" aria-hidden="true"></i><span>X (Twitter)</span></a>
  <a href="#" class="social-4 in"><i class="fab fa-linkedin-in" aria-hidden="true"></i><span>LinkedIn</span></a>
  <a href="#" class="social-4 pi"><i class="fab fa-pinterest-p" aria-hidden="true"></i><span>Pinterest</span></a>
  <a href="#" class="social-4 rd"><i class="fab fa-reddit-alien" aria-hidden="true"></i><span>Reddit</span></a>
  <a href="#" class="social-4 wa"><i class="fab fa-whatsapp" aria-hidden="true"></i><span>WhatsApp</span></a>
</div>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css";
html, body {
  padding: 20px;
  margin: 0;
  background: #f2f4f6;
  font-family: Verdana, Geneva, sans-serif;
}
.social-row {
  padding-bottom: 30px;
}
.social-row a {
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-right: 5px;
  color: #ffffff;
  text-decoration: none;
}
.social-row a:focus-visible {
  outline: 3px solid #1f2937;
  outline-offset: 2px;
}
/* one background color per network */
.fb { background-color: #0866FF; }
.x { background-color: #000000; }
.in { background-color: #0A66C2; }
.pi { background-color: #E60023; }
.rd { background-color: #D93A00; }
.wa { background-color: #0F7A6E; }
/* style 1 */
.social-1 {
  display: inline-block;
  width: 60px;
  height: 60px;
  overflow: hidden;
}
.social-1 i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform 0.2s, background-color 0.2s;
}
.social-1:hover i {
  background-color: rgba(0,0,0,0.1);
  transform: scale(1.2);
}
/* style 2 */
.social-2 {
  display: inline-flex;
  height: 50px;
  overflow: hidden;
}
.social-2 i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 50px;
  background-color: rgba(0,0,0,0.1);
  transition: background-color 0.2s;
}
.social-2 span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.2s;
}
.social-2:hover i {
  background-color: rgba(0,0,0,0.2);
}
.social-2:hover span {
  background-color: rgba(0,0,0,0.1);
}
/* style 3 */
.social-3 {
  display: inline-flex;
  height: 40px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 0 15px 4px 15px;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
}
.social-3 i {
  padding-right: 10px;
}
.social-3:hover {
  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
}
/* style 4 */
.social-4 {
  display: inline-flex;
  height: 40px;
  overflow: hidden;
  border-radius: 20px;
}
.social-4 i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 40px;
  background-color: rgba(0,0,0,0.1);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: background-color 0.2s;
}
.social-4 span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.2s;
}
.social-4:hover i {
  background-color: rgba(0,0,0,0.2);
}
.social-4:hover span {
  background-color: rgba(0,0,0,0.1);
}

      

          


    

    
  

  















  
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