Share Button with Social Icons

Increase user engagement on your website with a share button adorned with social icons. Learn how to implement a button that allows users to easily share content across various social media platforms.

Enhance your website's user engagement with a share button featuring social icons using HTML and CSS. This guide will walk you through the process of integrating and customizing a share button, ensuring it fits seamlessly into your website's design and functionality.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet for the share button with social icons. This snippet includes the structure and styles needed to create an interactive and visually appealing share button.

Step 2: Link the CSS and Font Awesome File

  • Ensure the CSS file (styles.css) and Font Awesome are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the necessary styles: 
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Step 3: Customize and Make it Yours

  • Personalize the share button and social icons to match your website's aesthetics. Adjust the CSS styles (styles.css) to change the button's color, size, font, or icon styles. Experiment with different hover effects and icon arrangements to create a unique and engaging share button for your users.

By following these steps, you can implement and customize a share button with social icons using HTML and CSS, enhancing user interaction and visual appeal on your website.

Code Explanation

HTML Code

Button Element
<button class="button">
  • The main button element with a class of button, which will be styled using CSS.
Button Text
<span class="button-text">
  <span> Share </span>
  <i class="fa-solid fa-share-nodes"></i>
</span>
  • This span element with the class button-text contains the text and an icon indicating the share action.
  • The inner span element contains the text "Share".
  • The <i> element uses Font Awesome classes (fa-solid fa-share-nodes) to display a share icon.
Button Links
<span class="button-links">
  <a>
    <i class="fa-brands fa-twitter"></i>
  </a>
  <a>
    <i class="fa-brands fa-facebook"></i>
  </a>
  <a>
    <i class="fa-brands fa-linkedin"></i>
  </a>
</span>
  • This span element with the class button-links contains multiple anchor (<a>) elements, each representing a social media link.
  • Each <a> element contains an <i> element with Font Awesome classes to display the corresponding social media icons:
    • fa-brands fa-twitter for Twitter
    • fa-brands fa-facebook for Facebook
    • fa-brands fa-linkedin for LinkedIn

CSS Code

Global Styles
html,
body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
  • html, body: Set the height of the HTML document and body to 100% to ensure that the layout can span the full height of the viewport.
  • *: Apply box-sizing: border-box to all elements, ensuring that padding and border are included in the element's total width and height.
Body Styles
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8faff;
}
  • margin: 0: Remove default body margin.
  • display: grid; place-items: center: Center the content both vertically and horizontally.
  • background: #f8faff: Set a light blue background color.
Button Styles
.button {
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 50px;
  border-radius: 25px;
  border: 0;
  color: #f7f7f7;
  background: #275efe;
  font-family: "Euclid Circular A", "Poppins";
  cursor: pointer;
  transition: 0.2s;
}
  • position: relative: Position the button relative to its normal position to allow absolute positioning of child elements.
  • overflow: hidden: Hide content that overflows the button’s boundaries.
  • width: 140px; height: 50px: Set the button's dimensions.
  • border-radius: 25px: Give the button rounded corners.
  • border: 0: Remove the default border.
  • color: #f7f7f7: Set the text color to a light shade.
  • background: #275efe: Set the background color to a shade of blue.
  • font-family: "Euclid Circular A", "Poppins": Specify the font family.
  • cursor: pointer: Change the cursor to a pointer when hovering over the button.
  • transition: 0.2s: Apply a transition effect for smooth state changes.
Icon Styles
.button i {
  font-size: 18px;
}
  • Set the font size for the icons within the button.
Button Text and Links Container Styles
.button-text,
.button-links {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
  • position: absolute; top: 0; left: 0: Position these elements at the top left corner of the button.
  • display: flex; align-items: center: Use flexbox to align items in the center vertically.
  • width: 100%; height: 100%: Make these elements fill the entire button.
  • transition: 0.3s: Apply a transition effect for smooth state changes.
Button Text Styles
.button-text {
  gap: 10px;
  justify-content: center;
  color: inherit;
  font-size: 16px;
}
  • gap: 10px: Set the space between child elements.
  • justify-content: center: Center the text within the button.
  • color: inherit: Inherit the color from the parent (#f7f7f7).
  • font-size: 16px: Set the font size.
Button Links Styles
.button-links {
  opacity: 0;
  justify-content: space-between;
  padding: 0 28px;
  transition: 0.2s;
}
  • opacity: 0: Initially hide the links.
  • justify-content: space-between: Space the links evenly.
  • padding: 0 28px: Add horizontal padding inside the container.
  • transition: 0.2s: Apply a transition effect for smooth state changes.
Individual Link Styles
.button-links a {
  translate: 0 50px;
  transition: 0.3s;
}
  • translate: 0 50px: Initially position the links outside the visible area.
  • transition: 0.3s: Apply a transition effect for smooth state changes.
Hover Effects
.button:hover {
  border-radius: 6px;
}
.button:hover .button-links a:nth-child(1) {
  transition-delay: 0.05s;
}
.button:hover .button-links a:nth-child(2) {
  transition-delay: 0.1s;
}
.button:hover .button-links a:nth-child(3) {
  transition-delay: 0.15s;
}
.button:hover .button-text {
  translate: 0 -100%;
}
.button:hover .button-links {
  opacity: 1;
}
.button:hover .button-links a {
  translate: 0;
}
  • When the button is hovered over:
    • border-radius: 6px: Reduce the border-radius to make the corners less rounded.
    • Each link (a elements) will have a transition delay to stagger its appearance.
    • .button-text will move up by 100% of its height.
    • .button-links will become fully opaque.
    • Links will move into the visible area.
Link Icon Styles
.button-links i {
  color: #f7f7f7;
}
  • Set the icon color within the button links to a light shade.