Neumorphism Social Media Buttons using HTML & CSS

Neumorphism Social Media Buttons are much more beautiful than ordinary button designs. You can make this type of design using only HTML and CSS.

In this article, I am going to show how CSS Neumorphism social media buttons are created using HTML and CSS code. Earlier I showed the design of many more types of social media buttons using Neumorphism design.

Neumorphism is a phenomenal UI trend that is currently being used to create a variety of elements. Such designs are much more attractive and much easier to make. These are basically made using a box-shadow of CSS code.

 There are two types of Neumorphism designs, one is dark and the other is light. In this case, I have made light Neumorphism social media buttons. Social media buttons are used in different places so that the user can share the content in his social account.

CSS Neumorphism Social Media Buttons [Live Demo]

 Below I have given a live demo that will help you understand how this CSS Neumorphism social media button works.

See the Pen neumorphism social button by Raj Template (@RajTemplate) on CodePen.

Hopefully, the live demo above has helped you get a live experience of these Neumorphism social-media-icons. 

As you saw in the demo here I have used five social media icons and designed them using CSS code. I have given each icon the size of a button. Under normal circumstances, those buttons are slightly raised. When you click on those buttons or move the mouse, the buttons will move slightly inwards.

 I have used blue color in all the icons. You can use any other color or different custom color for each if you want. In this case, the background color of the webpage and the background color of the social media button is completely the same. 

However, in this case, I have used the shadow of the CSS code to determine the size of the social button. Below I have provided the necessary source code which you can copy and use in your own work.

Neumorphism Social Media Buttons HTML and CSS

Create an HTML and CSS file to use the code below. In this case, you can not create a separate CSS file. You can add the required source code to the HTML file using style tags (<style> </style>).

HTML Code:

The following codes are HTML programming codes that were originally used to create their basic structure. Here I have used the icon of font-awesome. I used the CDN link of the font awesome to make these icons work. You copy the following HTML code and then paste it into your HTML file.

    <a href="#" class="btn"><i class="fab fa-facebook-f"></i></a>

    <a href="#" class="btn"><i class="fab fa-whatsapp"></i></a>

    <a href="#" class="btn"><i class="fab fa-youtube"></i></a>

    <a href="#" class="btn"><i class="fab fa-instagram"></i></a>

    <a href="#" class="btn"><i class="fab fa-twitter"></i></a>

 

CSS Code: 

The following codes are the CSS codes that have been used to design these Neumorphism social media buttons. You copy these codes and paste them into your CSS file. If you want to paste it into an Html file, use the style tag.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #dde1e7;  /* webpage bacground color */
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.btn {
  position: relative;
  transition: 0.2s;
  background: #dde1e7;   /* background color of button */
  border-radius: 50%;  /* make it round */
  height: 70px;   /* height of button */
  width: 70px;
  margin: 20px;
  box-shadow: -7px -7px 20px 0 rgba(255, 255, 255, 0.9),
          7px 7px 20px 0 rgba(0, 0, 0, 0.3);
}

.btn:hover {
  transform: scale(1.1); /* button hover effect */
}

.btn::before {
  content: "";
  background: #dde1e7;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  position: absolute;
  height: 80%;
  width: 80%;
  transform: translate(-50%, -50%);
}

.btn:hover::before {
  box-shadow: inset -7px -7px 20px 0 rgba(255, 255, 255, 1),
          inset 7px 7px 20px 0 rgba(0, 0, 0, 0.3);
}

.btn i {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  color: #2b8eaa;  /* icon color */
  font-size: 35px;  /* icon font size */
  top: 50%;
  left: 50%;
}

.btn:hover i {
  font-size: 30px;
}

 

 Hopefully, you have been able to create a social media button of Neumorphism design using the above source code. If the above code does not work, you can download the required source code using the download button below.