In 3D Social Media Icons Using HTML and CSS you will learn how to make your icons more attractive and still remain united within the professional look.

3D Social Media Icons Using HTML and CSS (Free Source Code)

Byjvcodes

Social media logos are also important tools of any web-site since it is necessary for a user to be able to find you in social networks. In 3D Social Media Icons Using HTML and CSS you will learn how to make your icons more attractive and still remain united within the professional look.

This source code gives your social media links a more engaging and unique appeal due to its design. The code is written with respect to the coding standard which enable the code to have high performance and easy to implement.

I am pleased to share with you this source code that will enable you makeover your site aesthetically with ease. So let’s get in!

GitHub Source: 3D Social Media Icons

Features

  • 3D Animation on Hover: While these icons are better on design, they include a smooth and attractive 3D animation effect on hovering.
  • Responsive: All the icons are vector based and extremely flexible, meaning they will work on desktops and mobile devices, laptops etc.
  • Easy to Customize: It is very simple to customize the look of the icons such as color, size as well as hover effects in relation to your site design.
  • Compatibility: The code is cross platform compatible with almost all modern browsers.
  • Clean Code: The code is written very clean, spaced, and indented in well-structured HTML and CSS and does follow good coding standards.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- 
======================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
Get Millions of Free Web UI Source Codes!
======================================================
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Social Media Icons | JV Codes</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="social">
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.19795 21.5H13.198V13.4901H16.8021L17.198 9.50977H13.198V7.5C13.198 6.94772 13.6457 6.5 14.198 6.5H17.198V2.5H14.198C11.4365 2.5 9.19795 4.73858 9.19795 7.5V9.50977H7.19795L6.80206 13.4901H9.19795V21.5Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C9.10457 3 10 3.89543 10 5V8H16C17.1046 8 18 8.89543 18 10C18 11.1046 17.1046 12 16 12H10V14C10 15.6569 11.3431 17 13 17H16C17.1046 17 18 17.8954 18 19C18 20.1046 17.1046 21 16 21H13C9.13401 21 6 17.866 6 14V5C6 3.89543 6.89543 3 8 3Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12Z" fill="currentColor"></path>
        <path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5ZM19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
</ul>
</body>
</html>

CSS

Here is the complete code for style.css file to style the 3d social media icons:

/*
=====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
Get Millions of Free Web UI Source Codes!
=====================================================
*/
body {
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100vh;
    background-color: #929292;
}

.social {
    margin: 0;
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .social .social-item {
    margin: 0 30px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .social .social-item .social-link {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg)
      translate(0, 0);
    transition: all 0.4s ease;
  }
  
  .social .social-item .social-link::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -10px;
    height: 100%;
    width: 10px;
    background: #b1b1b1;
    transition: all 0.4s ease;
    transform: rotate(0deg) skewY(-45deg);
  }
  
  .social .social-item .social-link::after {
    content: "";
    position: absolute;
    top: 40px;
    left: -5px;
    height: 10px;
    width: 100%;
    background: #b1b1b1;
    transition: all 0.4s ease;
    transform: rotate(0deg) skewX(-45deg);
  }
  
  .social .social-item .social-link:hover {
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);
    box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
  }
  
  .social .social-item:nth-child(1) a {
    color: #3b5999;
  }
  
  .social .social-item:nth-child(1):hover a {
    background: #3b5999;
  }
  
  .social .social-item:nth-child(1):hover a::before {
    background: #3b5999;
  }
  
  .social .social-item:nth-child(1):hover a::after {
    background: #3b5999;
  }
  
  .social .social-item:nth-child(2) a {
    color: #55acee;
  }
  
  .social .social-item:nth-child(2):hover a {
    background: #55acee;
  }
  
  .social .social-item:nth-child(2):hover a::before {
    background: #55acee;
  }
  
  .social .social-item:nth-child(2):hover a::after {
    background: #55acee;
  }
  
  .social .social-item:nth-child(3) a {
    color: #dd4b39;
  }
  
  .social .social-item:nth-child(3):hover a {
    background: #dd4b39;
  }
  
  .social .social-item:nth-child(3):hover a::before {
    background: #dd4b39;
  }
  
  .social .social-item:nth-child(3):hover a::after {
    background: #dd4b39;
  }
  
  .social .social-item:nth-child(4) a {
    color: #e4405f;
  }
  
  .social .social-item:nth-child(4):hover a {
    background: #e4405f;
  }
  
  .social .social-item:nth-child(4):hover a::before {
    background: #e4405f;
  }
  
  .social .social-item:nth-child(4):hover a::after {
    background: #e4405f;
  }
  
  .social .social-item .social-link:hover {
    color: #ffffff;
  }

Download Source Code

Download full source code of 3D social media icons from the following button. This source code is free from any type of copyright and can be used for both personal and commercial use.

Download Source Code

Conclusion

3D Social Media Icons Using HTML and CSS are one of the great templates that will enhance the site’s looks and the interactivity of the client. This code is perfect for placing attractive and practical social media icons on any Web site.

You can use this code for your own projects and it is requested to credit JV Source Codes, simply by adding a link to our site.

Please remember that you can check out more wonderful information here by subscribing to our channel. If you have any concern or experience difficulties, feel free to comment below, I will be able to support you.

Download JV Source Codes

Similar Posts

Thanks to 4 Cards Responsive Pricing Table with Animation Using HTML and CSS, is a perfect solution for every one who wants to show the price offers on the website.
| | |

4 Cards Responsive Pricing Table with Animation Using HTML and CSS (Free Source Code)

Designing clean, professional and navigable price tables is perhaps one of the essential aspects of modern web design. Thanks to 4 Cards Responsive Pricing Table with Animation Using HTML and CSS, is a perfect solution for every one who wants to show the price offers on the website. As usual, this tutorial comes with the…

Navigation Menu Hover Animation
| | |

Navigation Menu Hover Animation in HTML and CSS

A navigation menu is one of the most important elements on any website. Navigation menus assist users in getting around various sections and pages that are in the website. Hover animations are another means through which you can enrich the user experience. The Navigation Menu Hover Animation in HTML, CSS enhances the look of any…

In this post, I will give a free source code for developing an AI Chatbot Using HTML, CSS, and JavaScript, which can be easily drawn into a project.
| | |

Responsive Ai Chatbot Using HTML, CSS and JavaScript (Free Source Code)

Artificial intelligence chatbots have become a necessity in the current websites as they assist users, give immediate response, produce conversational interactions or even make the website interactive. Developing an AI chatbot might look very complicated, but with HTML, CSS, and JavaScript, you can develop one easily. That is why, in this post, I will give…

Leave a Reply

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