HG WEB STUDIO

Filed in: ,

CSS Neumorphism Social Icon Buttons for Elementor

Updated on: June 28, 2024

Table of Contents

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

Neumorphism combines minimalism with soft 3D shadows and highlights to create a polished and clean appearance.

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

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

Neumorphism Social Icon Buttons Demo

See the Pen neumorphism social icon 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-soundcloud"></i></a>
<a href="#" class="custom-btn" role="link"><i class="fa-brands fa-spotify"></i></a>
<a href="#" class="custom-btn" role="link"><i class="fa-brands fa-youtube"></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.

The background color of these buttons should be transparent to match the background of your web page. To make them stand out on the page, we need to add a box-shadow effect with a highlight on the top left and a shadow on the bottom right. The cubic-bezier transition creates the bouncy click effects. If you prefer a normal click effect, change the cubic-bezier property to ease or linear.

To maintain the soft design, be sure to have highlight and shadow colors similar to the background color. In this example, the background is light blue, so the highlight is a lighter blue and the shadow is a darker gray-blue.

Three circles representing the highlight color, background color, and shadow color of the neumorphism social icon buttons.
/* buttons in their normal state */
.custom-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  text-decoration: none;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 30px;
  box-shadow: 12px 12px 16px 0 #d5dce7, -12px -12px 16px #fbfbfb, inset 0 0 0 0 transparent;
  transition: box-shadow 200ms, transform 300ms cubic-bezier(.2, 2, 1, 1);
}

/* icon color */
.fa-brands {
  color: #d1d1d1;
}

Next, let’s change the icon color on hover.

/* icon hover */
.custom-btn:hover .fa-brands {
  color: #FF04F3;
}

Lastly, we need the active state to create a visual indication that the buttons were clicked. The box-shadow changes from outside the buttons to inside the buttons. This creates the illusion that the buttons were pushed in.

The shadow colors remain the same as before but they are displayed in the rgba() format to include transparency.

/* social icon buttons active state */
.custom-btn:active {
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 8px 8px 12px 0px rgba(213, 220, 231, .9), inset -8px -8px 12px 0px rgba(251, 251, 251, 0.9);
  transform: scale(.9);
}

How to add the Neumorphism social icon buttons in Elementor

Demo of neumorphism social icon buttons in Elementor

To create these 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 #5D5D60.
  3. Adjust the size, padding, and spacing to fit the style of your website. I’m using size: 32px, padding: 16px, and spacing: 48px.
  4. Set the border-radius to 50px.
  5. In the Icon Hover tab, change the secondary color to #FF04F3. Leave the primary color transparent.

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 CSS for neumorphism social icon buttons in WordPress customizer

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 */ 
.custom-btn a {
  border-radius: 50%;
  box-shadow: 6px 6px 10px 0 #d5dce7, -6px -6px 10px 0 #fbfbfb, inset 0 0 0 0 transparent;
  transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1);
}

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

/* active state */
.custom-btn a:active {
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 6px 6px 10px 0px rgba(213, 220, 231, .9), inset -6px -6px 10px 0px rgba(251, 251, 251, 0.9);
  transform: scale(.9);
}

Publish your changes.

Step 3: Checking for mobile responsiveness in Elementor

Image of neumorphism social icon buttons on mobile device with website in responsive mode

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 Neumorphism Social Icon Buttons with CSS Effects in Elementor

/* buttons in their normal state */ 
.custom-btn a {
  border-radius: 50%;
  box-shadow: 6px 6px 10px 0 #d5dce7, -6px -6px 10px 0 #fbfbfb, inset 0 0 0 0 transparent;
  transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1);
}

/* active state */
.custom-btn a:active {
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 6px 6px 10px 0px rgba(213, 220, 231, .9), inset -6px -6px 10px 0px rgba(251, 251, 251, 0.9);
  transform: scale(.9);
}

Table of Contents

Search

Browse by Category

Leave a Reply

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