BUTTONS

Premium Social Media Icon Buttons

A clean set of neumorphic social media icon buttons with brand-colored hover effects, soft 3D shadows, responsive styling and accessible focus states.

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

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

    <!-- Facebook -->
    <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>


    <!-- Instagram -->
    <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>


    <!-- X -->
    <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>


    <!-- LinkedIn -->
    <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>
CSS
.cr-social-buttons-demo {
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px 20px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(124, 58, 237, 0.07),
      transparent 42%
    ),
    #edf1f7;
}

.cr-social-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.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);

  isolation: isolate;

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

  -webkit-tap-highlight-color: transparent;
}

.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;
}

.cr-social-btn::before {
  content: "";

  position: absolute;

  width: 58px;
  height: 25px;

  left: 50%;
  bottom: -10px;

  transform:
    translateX(-50%)
    scale(0.55);

  border-radius: 50%;

  background: rgba(var(--brand-rgb), 0.65);

  filter: blur(15px);

  opacity: 0;

  z-index: -1;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.cr-social-btn::after {
  display: none;
}

.cr-social-btn svg {
  position: relative;
  z-index: 2;

  width: 30px;
  height: 30px;

  display: block;

  fill: currentColor;

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

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

  color: var(--brand);

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfcff 45%,
      #edf1f7 100%
    );

  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),
    inset 1px 1px 1px rgba(255, 255, 255, 1);
}

.cr-social-btn:hover::before {
  opacity: 0.68;

  transform:
    translateX(-50%)
    scale(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));
}

.cr-social-btn--instagram:hover {
  color: #d62976;

  box-shadow:
    0 22px 25px rgba(105, 116, 135, 0.23),
    0 9px 22px rgba(214, 41, 118, 0.22),
    -8px -8px 18px rgba(255, 255, 255, 1),
    inset 1px 1px 1px rgba(255, 255, 255, 1);
}

.cr-social-btn--instagram:hover::before {
  background:
    linear-gradient(
      90deg,
      #feda75,
      #fa7e1e,
      #d62976,
      #962fbf,
      #4f5bd5
    );
}

.cr-social-btn:active {
  transform:
    translateY(-2px)
    scale(0.96);

  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.38),
    inset -6px -6px 12px rgba(255, 255, 255, 0.92);
}

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

@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;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cr-social-btn,
  .cr-social-btn::before,
  .cr-social-btn::after,
  .cr-social-btn svg {
    transition: none;
  }
}
JavaScript
// No JavaScript required.
// This component uses HTML and CSS only.

How These Premium Social Media Icon Buttons Work

The Premium Social Media Icon Buttons component creates a row of four social links for Facebook, Instagram, X, and LinkedIn. Each button is an anchor element containing an inline SVG icon. The aria-label on every link identifies its destination for assistive technology, while the SVG itself uses aria-hidden="true" so the decorative icon is not announced separately.

The main .cr-social-buttons container uses Flexbox to center the buttons, with a 26px gap and flex-wrap: wrap. This lets the row wrap when horizontal space becomes limited. The outer demo container also uses flex alignment to position the group in the center of a light background with a subtle radial purple highlight.

Each button measures 78px by 78px on larger screens and has a 22px border radius. Its light linear-gradient background and multiple outer and inset shadows produce the raised, soft-surface appearance. The icon inherits currentColor, which means the same SVG can automatically change from the default gray to the appropriate social-network color.

Brand colors are managed with the custom properties --brand and --brand-rgb. Facebook uses #1877f2, Instagram uses #d62976, X uses #20242c, and LinkedIn uses #0a66c2. This keeps the shared hover styles in one place while allowing each button to have its own color.

On hover, the button moves upward by 11px and scales to 1.06. At the same time, the SVG moves up 2px, scales to 1.17, and receives two brand-colored drop shadows. The ::before pseudo-element creates another important part of the effect: a blurred colored glow underneath the button. It starts with zero opacity and a 0.55 scale, then expands and becomes visible on hover. Instagram gets a separate multi-color gradient glow instead of a single brand color.

These changes are animated with transitions of roughly 0.3s to 0.35s. The movement uses a custom cubic-bezier(.2, .8, .2, 1) timing function. For more information about this mechanism, see the MDN CSS transitions documentation.

The component also includes active and keyboard-focus states. Pressing a button reduces its scale to 0.96 and switches to inset shadows, while :focus-visible adds a 3px brand-colored outline with a 6px offset. No JavaScript is required; all interaction is handled by HTML and CSS.

Customizing These Premium Social Media Icon Buttons

The design can be adjusted through the existing dimensions, CSS custom properties, spacing, shadows, and transition values without changing its basic structure.

  • Change the 78px width and height to make the desktop buttons larger or smaller.
  • Adjust the 22px border radius to control how rounded each button appears.
  • Edit --brand and --brand-rgb in the platform-specific classes to change their hover colors and glow effects.
  • Change the 26px Flexbox gap to increase or reduce spacing between buttons.
  • Adjust translateY(-11px) and scale(1.06) to control the amount of hover movement.
  • Modify the 30px SVG dimensions to resize the social icons.
  • Edit the box-shadow values to change the raised surface and hover depth.
  • Adjust the 0.3s and 0.35s transition durations for faster or slower feedback.
  • On screens up to 480px, change the existing 66px button size, 19px radius, 17px gap, or 26px icon size.

Where to Use These Premium Social Media Icon Buttons

Because these buttons are normal anchor elements, they fit places where visitors need clear links to social profiles while still providing visible hover and keyboard states.

  • Personal portfolio contact or profile sections
  • Developer and designer portfolio pages
  • Agency and company website footers
  • Personal or company About pages
  • Creator profile and link pages
  • Team-member profile sections
  • Landing-page social follow areas
  • Contact sections containing external social profiles

Replace the placeholder href="#" values with the actual profile destinations before using the component on a live site. If another button interaction is needed elsewhere in the same interface, the related Magnetic Hover Button provides a different hover-based approach.

Frequently Asked Questions

Do these Premium Social Media Icon Buttons require JavaScript?

No. The published component uses HTML and CSS only. Hover movement, icon scaling, colored glows, active feedback, and focus styling are all implemented with CSS.

Are the buttons responsive on mobile screens?

Yes. A media query at max-width: 480px reduces each button from 78px to 66px, changes the radius from 22px to 19px, reduces the icon to 26px, and decreases the gap between buttons to 17px.

How does each icon get a different hover color?

Each platform-specific class defines --brand and --brand-rgb custom properties. Shared hover rules then use these variables for the icon color, glow, shadow, and focus outline. Instagram additionally replaces the glow background with its multi-color gradient.

Does the component account for reduced-motion preferences?

Yes. A prefers-reduced-motion: reduce media query removes transitions from the buttons, their pseudo-elements, and SVG icons. This prevents the transition animations when the user’s system requests reduced motion.

The Premium Social Media Icon Buttons combine inline SVG icons, CSS custom properties, layered shadows, transforms, and responsive styling in a compact HTML-and-CSS component that can be connected directly to real social profile URLs.

Scroll to Top