Dear friends in this articles we learn about How to make 3D Social media icons using HTML, CSS with Hover Effects. If you like our article then visit more.

3D Social Media Icons

Hello, friends in this article I will show you how to create 3D social media icons using HTML and CSS programming code. Here I have created 4 social media buttons which are made up of three complete dimensions. HTML code has been used to structure them and CSS programming code has been used to design them. These buttons are made by hover. When someone clicks on the buttons or moves the mouse over them, the buttons will rise slightly above normal and change color. Different colors have been used for each button.

Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how 3d social media icons using css further coding do. This a best design in the css and you can make easily with source code that is given below. And hope you understand with our article because some changing on the source code you can copy all source code. It is a very amazing design because in this design make a 3d effect with transform rotated.

You can watch the live demo by clicking on the demo button below. You can also use the download link above to download the required source codes for free. Below are the programming codes for making it. You can easily make it using those.

HTML for Structure

Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for stand fan project make a fast with visual studio code editor.

Now we will learn how to write html for 3D social media icons using html, css. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named social. Then after that we will take div tag again and we will name its class as facebook. Again we will take div tag and name its class as twitter after that we will take div tag again and we will name its class as instagram. Again we will take div tag and name its class as pinterest, then again take div tag and name its class as youtube. Now in the last we will take the div tag and name its class as center.

CSS for Scoial Media Icons Design

Now we will the 3D social media icons using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file. If you want to give the style then you have three ways for using css first you can give using inline css and second you can give the internal css and third you can guve the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. and after this give the body tag in this tag use some properties like background color and font-family.

First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
font-weight: bold;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(204, 204, 204);
}

Source Code..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Buttons by Code with Nizami</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
      *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', sans-serif;
          font-weight: bold;
      }
      body{
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: rgb(204, 204, 204);
      }
      .all-icon{
          display: flex;
      }
      .btn{
          width: 170px;
          height: 60px;
          background-color: rgb(255, 255, 255);
          transform: rotate(-30deg) skewX(25deg) translate(0,0);
          transition: 0.4s;
          cursor: pointer;
      }
      .btn.fb:hover{
          box-shadow: -20px 20px 10px rgb(78, 78, 78),
          inset 0 0 100px rgb(56, 56, 252);
      }
      .btn.twt:hover{
          box-shadow: -20px 20px 10px rgb(78, 78, 78),
          inset 0 0 100px rgb(36, 183, 252);
      }
      .btn.insta:hover{
          box-shadow: -20px 20px 10px rgb(78, 78, 78),
          inset 0 0 100px rgb(247, 6, 66);
      }
      .btn.yt:hover{
          box-shadow: -20px 20px 10px rgb(78, 78, 78),
          inset 0 0 100px rgb(250, 6, 6);
      }
      .btn::before{
          content: '';
          position: absolute;
          top: 5px;
          left: -10px;
          height: 100%;
          width: 10px;
          background-color: #6e5866;
          transition: 0.5s;
          transform: rotate(0deg) skewY(-45deg);
      }
      .btn::after{
          content: '';
          position: absolute;
          bottom: -10px;
          left: -5px;
          height: 10px;
          width: 100%;
          background-color: #6e5866;
          transition: 0.5s;
          transform: rotate(0deg) skewX(-45deg);
      }
      .btn ion-icon{
          font-size: 30px;
          margin: 15px 0 0 15px;
      }
      .btn span{
          position: absolute;
          top: 20px;
          left: 50px;
          letter-spacing: 2px;
      }
    </style>
</head>
<body>
<div>
    <div>
        <ion-icon name="logo-facebook"></ion-icon>
        <span>-Facebook</span>
    </div>
    <div>
        <ion-icon name="logo-twitter"></ion-icon>
        <span>-Twitter</span>
    </div>
    <div>
        <ion-icon name="logo-instagram"></ion-icon>
        <span>-Instagram</span>
    </div>
    <div>
        <ion-icon name="logo-youtube"></ion-icon>
        <span>-Youtube</span>
    </div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

Watch video related this article…