HG WEB STUDIO

Filed in: ,

3D CSS Social Icon Buttons for Elementor

Updated on: July 5, 2024

Table of Contents

In this post, I’ll walk you through how to create 3D social icons with click effects so you can easily add it to your web designs and Elementor.

These social icon buttons are perfect for modern and minimal web designs that prioritize creative aesthetics.

How to Plan a WordPress Website Start to Finish svg of arrow pointing right

Neumorphism Social Icon Buttons Demo

See the Pen Social Buttons by Kate (@kate_hg123) on CodePen.

HTML Breakdown

I used the anchor element for these buttons, but you can swap it out for the button element. Each of these elements has different use cases.

Use Cases:

  • Use the button element when: You need a clickable element to trigger an action, like submitting a form, triggering JavaScript functions, or performing an action within the webpage.
  • Use the anchor element when: You need to create hyperlinks for navigation, whether it’s within the same webpage or linking to external pages.

HTML Code using the anchor element

<a href="#" class="custom-btn" role="link"><i class="fa-brands fa-youtube"></i></a>
<a href="#" class="custom-btn" role="link"><i class="fa-brands fa-tiktok"></i></a>
<a href="#" class="custom-btn" role="link"><i class="fa-brands fa-pinterest"></i></a>

To create a link that is visually styled as a button, we need to have the following attributes: href, class, and role.

  • href: Defines the destination link. Replace the ‘#’ with your link or anchor.
  • class: Defines the selector to target for styling.
  • role: Defines the purpose of the element for accessibility technologies like screen readers.

I used Font Awesome to display the different social icons inside the buttons.

Learn more about links at W3Schools.

HTML Code using the button element

<button id="my-btn" class="custom-btn" type="button">Submit</button>

To create a button, we need to have the following attributes: class, id, and type.

  • class: Defines the selector to target for styling.
  • id: Defines the selector to target for JavaScript functions or other element-specific styling and actions. Ids are more specific than classes and should only be used once, whereas classes can be used for multiple elements.
  • type: Defines the type of button and its intended action. There are three types: button, submit, and reset.

Learn more about buttons at W3Schools.

CSS Breakdown

To style our social icon buttons, we need to target the elements with the class selector we chose in the HTML. I’m using ‘.custom-btn’.

First, let’s create the normal state.

I’m using the property ‘transform-style: preserve-3d’ to create the 3D effect with the pseudo-element. The ‘preserve-3d’ value allows child elements to maintain their 3D transformations, creating a true 3D effect within the parent element. Without ‘transform-style: preserve-3d’, the child’s 3D transformation would be flattened, and the 3D effect would not be visible.

Here’s how it works:

  1. Parent Element: Apply transform-style: preserve-3d; to the parent element. This tells the browser to maintain the 3D space for its children.
  2. Child Elements: Apply 3D transformations (e.g., rotateX, rotateY, translateZ) to the child elements. These transformations will be preserved in the 3D space defined by the parent.
/* Global color properties */
:root {
  --background: #fafafa;
  --top-background: #fafafa;
  --top-border: #cbcbcb;
  --icon-color: #777;
  --front-side: #d6d4d6;
  --front-side-border: #bcbcbc;
  --button-shadow: #e0e0e0;
  --top-hover: #f7f7f7;
}

Let’s create the social icons in their normal state. The ‘cubic-bezier’ transition property gives the buttons the bouncy click effects. Switch it out for ‘ease’ or ‘linear’ to have standard transition effects applied to the buttons.

/* buttons in their normal state */
/* parent element */
.custom-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 56px;
  text-decoration: none;
  background-color: var(--top-background);
  border: 2px solid var(--top-border);
  border-radius: 12px;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}

/* icon color and size */
.custom-btn .fa-brands {
  font-size: 24px;
  color: var(--icon-color);
}

Next, let’s create the before pseudo-element with the ‘transform: translate3d()’ property.

/* Child element in its normal state */
.custom-btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--front-side);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--front-side-border), 0 8px 0 0 var(--button-shadow);
  transform: translate3d(0, 10px, -12px);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

Now we need to create the hover states.

/* Button hover states */
.custom-btn:hover {
  background-color: var(--top-hover);
  transform: translate(0, 4px);
}

.custom-btn:hover::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 6px 0 0 var(--button-shadow);
  transform: translate3d(0, 8px, -16px);
}

Lastly, we need to create the active states.

/* Button active states */
.custom-btn:active {
  background-color: var(--button-shadow);
  transform: translate(0, 12px);
}

.custom-btn:active::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 0 var(--button-shadow);
  transform: translate3d(0, 0, -12px);
}

How to add the 3D social icon buttons in Elementor

Image of 3D social icons in Elementor footer

To create these 3D social buttons in Elementor, I’m using the social icons widget instead of writing my own HTML code. We can write fewer lines of custom CSS by using some of the style settings available in the widget.

For this example, I’ve adjusted some of the properties to fit the styling of the web design, like the size and color.

Step 1: Add the social icons widget to your canvas and give it some basic styling

Navigate to the social icons widget content tab:

  1. Choose the icons for your social icon buttons.
  2. Add the links for each icon.
  3. Choose the alignment

Then, in the social icons widget style tab:

  1. Change the color to custom.
  2. Set the primary color to transparent and the secondary color to #413D3A.
  3. Adjust the size, padding, and spacing to fit the style of your website. I’m using size: 32px for spacing.
  4. Set the border-radius to 8px.

Lastly, in the button widget advanced tab:

  1. In the CSS classes box, type in your class selector. I used ‘custom-btn’.

Now let’s write our code.

Step 2: Write the custom CSS in the WordPress Customizer

You can also use the custom CSS area in the advanced tab of the button widget. I prefer keeping all my custom code in one place for better management.

Image of 3D social icons in Elementor footer with WordPress CSS  customizer open

In the WP customizer navigate to ‘Additional CSS’

1. Create the normal state (how it looks on the page without any user interaction). Be sure to target the ‘a’ element for the CSS, otherwise the styling will be applied to the container for the buttons and not the buttons themselves.

/* buttons in their normal state */ 
/* Parent */ 
.custom-btn a {
  position: relative;
  background-color: var(--top-background);
  border: 2px solid var(--top-border);
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 250ms cubic-bezier(0, 0, 0.58, 1);
}

/* Child*/
.custom-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--front-side);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--front-side-border), 0 8px 0 0 var(--button-shadow);
  transform: translate3d(0, 10px, -12px);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

2. Next, create the hover state for the buttons.

/* hover states */
/* Parent */
.custom-btn a:hover {
  background-color: var(--top-hover);
  transform: translate(0, 4px);
  opacity: 1; /* Fixes theme setting. You may not need this  */
}

/* Child*/
.custom-btn a:hover::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 6px 0 0 var(--button-shadow);
  transform: translate3d(0, 8px, -16px);
  
}

Lastly, create the active states.

/* active states */
/* Parent */
.custom-btn a:active {
  background-color: var(--button-shadow);
  transform: translate(0, 12px);
 }

/* Child */
.custom-btn a:active::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 0 var(--button-shadow);
  transform: translate3d(0, 0, -12px);
}

Publish your changes.

Step 3: Checking for mobile responsiveness in Elementor

Image of 3D social icons in Elementor footer displayed on mobile device

Lastly, we need to check our code for mobile responsiveness.

In the Elementor editor, adjust the padding or size of your buttons for tablet and mobile view using Elementor’s responsive settings.

Final Thoughts

Feel free to use my code as is, or play around with the different properties to create social icon buttons that fit your website aesthetic. Experiment with the colors and box-shadows, and make it yours!

Remember, if you experience any issues or have questions along the way, feel free to drop them in the comments below. I’d love to see your work, and I’m here to help!

Full Code for 3D Social Icons with CSS Effects in Elementor

/* Global color properties */ 
:root {
  --top-background: #fafafa;
  --top-border: #b8b2ad;
  --front-side: #d6d4d2;
  --front-side-border: #bab6b3;
  --button-shadow: #e3deda;
  --top-hover: #f7f7f7;
}

/* buttons in their normal states */ 
.custom-btn a {
  position: relative;
  background-color: var(--top-background);
  border: 2px solid var(--top-border);
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 250ms cubic-bezier(0, 0, 0.58, 1);
}

.custom-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--front-side);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--front-side-border), 0 8px 0 0 var(--button-shadow);
  transform: translate3d(0, 10px, -12px);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

/* buttons in their hover states */ 
.custom-btn a:hover {
  background-color: var(--top-hover);
  transform: translate(0, 4px);
  opacity: 1;
}

.custom-btn a:hover::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 6px 0 0 var(--button-shadow);
  transform: translate3d(0, 8px, -16px);
  
}

/* buttons in their active states */ 
.custom-btn a:active {
  background-color: var(--button-shadow);
  transform: translate(0, 12px);
 }

.custom-btn a:active::before {
  box-shadow: 0 0 0 2px var(--front-side-border), 0 0 var(--button-shadow);
  transform: translate3d(0, 0, -12px);
}

Table of Contents

Search

Browse by Category

Leave a Reply

Your email address will not be published. Required fields are marked *