Neumorphism Social Icons with HTML & CSS

In this article, you will learn how to create Neumorphism Social Icons using HTML and CSS.I have shared another snippet based on how to create Responsive Cards simple. In this tutorial, I have created a Neumorphism Social Icons with HTML and CSS, If you like this article, please also subscribe my YouTube channel - Code Info

We've got select up stunning and free CSS social media buttons, ribbons, icons with HTML and CSS geared up that will help you enhance your internet designs. Social media buttons are supplied nowadays on each website design. They may be used to promote your business on social networks and get in return capability customers. There are plenty of free social media icons sets accessible however on this article I really like to expose you a way to create custom ones with the help of HTML and CSS.

Below is the video tutorials. watch and practices

Including social media icons for your website is a good way to make connections with your customers via social networks, get their remarks in an informal way and involve them for your agencys existence.

Neumorphism

Neumorphism, or Soft UI, is a visual style that mixes background colours, shapes, gradients, highlights, and shadows to make sure photograph severe buttons and switches. All that allows attaining a soft, extruded plastic look, and almost 3D styling. Neumorphism is a visual style that blends techniques from skeuomorphism, realism, and flat design.

Box-Shadow

The box-shadow css property provides shadow results around an detail's frame. You may set a couple of results separated via commas. A container shadow is defined by using x and y offsets relative to the detail, blur and spread radius, and colour.

Source Code:

If you like this Neumorphism Social Icons design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Icon | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <button class="btn">
        <img src="images/facebook.png" />
      </button>
      <button class="btn">
        <img src="images/instagram.png" />
      </button>
      <button class="btn">
        <img src="images/youtube.png" />
      </button>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  background-color: rgb(214, 214, 214);
}

.container {
  width: 350px;
  margin: 280px auto;
}

.btn {
  width: 70px;
  height: 70px;
  margin: 20px;
  outline: none;
  border: none;
  background: rgb(214, 214, 214);
  box-shadow: 5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
  border-radius: 50%;
  transition: 0.2;
}

.btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.btn:hover::before {
  content: "";
  position: absolute;
  height: 80%;
  width: 80%;
  background: rgb(214, 214, 214);
  border-radius: 50%;
  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:active {
  box-shadow: inset 1px 1px 2px #babeec, inset -1px -1px 2px #fff;
}

.btn img {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: 0.2s;
}

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

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for Visiting.

Neumorphism

Box-Shadow

You may like this:

Source Code:

Post a Comment

Post a Comment

About Us

Contact Form