How to Build Premium Social Media Icon Buttons with CSS

Social media buttons are a small UI element, but a little depth and interaction can make them feel much more polished.

In this tutorial, we'll build a set of Premium Social Media Icon Buttons using only HTML and CSS. The buttons use a soft neumorphic style, brand-colored hover effects, responsive sizing, keyboard focus states, and reduced-motion support.

No JavaScript is required.

What We're Building

The component includes four social platforms:

• Facebook
• Instagram
• X
• LinkedIn

Each button starts with a neutral 3D appearance. On hover, the icon switches to its brand color, the button lifts slightly, and a soft colored glow appears underneath.

HTML Structure

The markup stays simple. Each social button is an anchor containing an inline SVG icon.

<div class="cr-social-buttons-demo">

  <div class="cr-social-buttons">

    <a
      class="cr-social-btn cr-social-btn--facebook"
      href="#"
      aria-label="Facebook"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3.3l.7-4H13V9c0-.7.3-1 1-1Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--instagram"
      href="#"
      aria-label="Instagram"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--x"
      href="#"
      aria-label="X"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.2 2H22l-8.3 9.5L23.5 22h-7.7l-6-7.8L3 22H-.8l8.9-10.2L-1.3 2h7.9l5.4 7.1L18.2 2Zm-1.3 18h2.1L5.5 3.9H3.2L16.9 20Z"/>
      </svg>
    </a>

    <a
      class="cr-social-btn cr-social-btn--linkedin"
      href="#"
      aria-label="LinkedIn"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5.3 7.7H1.6V22h3.7V7.7ZM3.5 2A2.2 2.2 0 1 0 3.5 6.4 2.2 2.2 0 0 0 3.5 2ZM22 13.8c0-4.3-2.3-6.3-5.4-6.3-2.5 0-3.6 1.4-4.2 2.3V7.7H8.7V22h3.7v-7.1c0-1.9.4-3.7 2.7-3.7 2.3 0 2.3 2.1 2.3 3.8v7H22v-8.2Z"/>
      </svg>
    </a>

  </div>

</div>

Creating the 3D Button Style

The neumorphic appearance comes from a light gradient combined with multiple shadows.

.cr-social-btn {
  --brand: #7c3aed;
  --brand-rgb: 124, 58, 237;

  position: relative;
  width: 78px;
  height: 78px;

  display: grid;
  place-items: center;

  border-radius: 22px;
  color: #696e78;
  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8faff 52%,
      #e9edf4 100%
    );

  box-shadow:
    9px 9px 18px rgba(163, 177, 198, 0.42),
    -9px -9px 18px rgba(255, 255, 255, 0.96),
    inset 1px 1px 1px rgba(255, 255, 255, 1);

  transition:
    transform 0.35s cubic-bezier(.2, .8, .2, 1),
    color 0.3s ease,
    box-shadow 0.35s ease;
}

The two outer shadows create the raised surface while the subtle inset highlight gives the button a little extra depth.

Adding Brand Colors

CSS custom properties make it easy to give every button its own hover color.

.cr-social-btn--facebook {
  --brand: #1877f2;
  --brand-rgb: 24, 119, 242;
}

.cr-social-btn--instagram {
  --brand: #d62976;
  --brand-rgb: 214, 41, 118;
}

.cr-social-btn--x {
  --brand: #20242c;
  --brand-rgb: 32, 36, 44;
}

.cr-social-btn--linkedin {
  --brand: #0a66c2;
  --brand-rgb: 10, 102, 194;
}

This lets the same hover rules work across all four buttons.

Hover Lift and Glow

The main interaction combines a vertical lift, slight scale change, icon color, and soft glow.

.cr-social-btn:hover {
  transform:
    translateY(-11px)
    scale(1.06);

  color: var(--brand);

  box-shadow:
    0 22px 25px rgba(105, 116, 135, 0.23),
    0 10px 22px rgba(var(--brand-rgb), 0.18),
    -8px -8px 18px rgba(255, 255, 255, 1);
}

.cr-social-btn:hover svg {
  transform:
    translateY(-2px)
    scale(1.17);

  filter:
    drop-shadow(0 3px 4px rgba(var(--brand-rgb), 0.30))
    drop-shadow(0 0 8px rgba(var(--brand-rgb), 0.18));
}

The Instagram version can also use a multicolor gradient glow to better match its visual identity.

Accessibility

Keyboard users should get a clear focus indicator:

.cr-social-btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 6px;
}

The SVG icons are decorative because each link already has an accessible aria-label.

The component also respects reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .cr-social-btn,
  .cr-social-btn::before,
  .cr-social-btn svg {
    transition: none;
  }
}

Responsive Styling

On smaller screens, the buttons can be reduced slightly:

@media (max-width: 480px) {
  .cr-social-buttons {
    gap: 17px;
  }

  .cr-social-btn {
    width: 66px;
    height: 66px;
    border-radius: 19px;
  }

  .cr-social-btn svg {
    width: 26px;
    height: 26px;
  }
}

Try It Yourself

You can experiment with the button size, shadows, colors, and hover effects in the live CodePen demo.

For the complete component, full CSS, live preview, and copy-ready source code, check out the full tutorial on CodeRipple:

https://getcoderipple.com/premium-social-media-icon-buttons/

The component is built entirely with HTML and CSS, so it's easy to customize and drop into your own frontend project.

Comments

[Svg/icons]

Small SVG detail: is there a fill: currentColor rule in the full CSS? In the snippet, changing the link’s color alone won’t recolor the paths.