Social Media Icon using HTML CSS Javascript

Hello, learner In this article, we are going to create a Social Media Icon using HTML CSS Javascript In the earlier past post, we have created a Responsive Gallery Design using HTML, CSS, and Javascript. Now it is time to create a Social media icon.

In this program, we are going to create social media icon design as you see in the above image it is the output of the below code. we have used HTML, CSS, and JS to create. HTML create basic structure . CSS design it with icon color position and at least Js help to create the perfect icon. we have created five buttons for five different icons. The hove effect is awesome.

Social Media Icon using HTML CSS Javascript [Source code]

To create social Media Icon using HTML CSS Javascript you have to create three HTML, CSS, and js files named index.html, style.css, and script.js in the same folder and you have to link the CSS and JS file to HTML. after that paste the HTML code in index.htm. paste the CSS code in style.css at last paste the JS code in Style.js that’s all after pasting the code. Now your Social Media icon Desing is ready.

At first, you have to create an HTML file named index.html paste the below code on it, and save it. Remember to give a .html extension to the HTML file.

<!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>Social Media Icon</title>  
   <link rel="stylesheet" href="style.css" />  
  </head>  
  <body>  
   <main>  
    <button>  
     <ion-icon name="logo-facebook"></ion-icon>  
    </button>  
    <button>  
     <ion-icon name="logo-twitter"></ion-icon>  
    </button>  
    <button>  
     <ion-icon name="logo-instagram"></ion-icon>  
    </button>  
    <button>  
     <ion-icon name="logo-youtube"></ion-icon>  
    </button>  
    <button>  
     <ion-icon name="logo-dribbble"></ion-icon>  
    </button>    
   </main>     
   <div class="cursor cursor--large"></div>  
   <div class="cursor cursor--small"></div>  
   <!-- gsap and icon link -->     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>  
    <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>  
    <script src="index.js"></script>  
 </html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

* {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
 }  
 body {  
  width: 100%;  
  height: 100vh;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  overflow: hidden;  
  background: #121212;  
  cursor: none;  
 }  
 .cursor {  
  width: var(--size);  
  height: var(--size);  
  border-radius: 50%;  
  position: absolute;  
  left: 0;  
  top: 0;  
  pointer-events: none;  
  z-index: 100;  
 }  
 .cursor--large {  
  --size: 40px;  
  border: 1px solid #ff3c3c;  
 }  
 .cursor--small {  
  --size: 10px;  
  background: #ff3c3c;  
  transform: translate(-50%, -50%);  
 }  
 main {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
 }  
 main button {  
  --size: 60px;  
  border: none;  
  min-width: var(--size);  
  min-height: var(--size);  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  font-size: 1.2rem;  
  background: rgba(255, 255, 255, 0.08);  
  color: #fff;  
  transition: background 200ms ease, color 200ms ease;  
  cursor: none;  
 }  
 main:hover button {  
  background: rgba(255, 255, 255, 0.04);  
  color: rgba(255, 255, 255, 0.04);  
 }  
 main:hover button:hover {  
  color: #fff;  
 }  
 .support {  
  position: absolute;  
  right: 10px;  
  bottom: 10px;  
  padding: 10px;  
  display: flex;  
 }  
 .support a {  
  margin: 0 10px;  
  color: #fff;  
  font-size: 1.8rem;  
  backface-visibility: hidden;  
  transition: all 150ms ease;  
 }  
 .support a:hover {  
  transform: scale(1.1);  
 }

After pasting both HTML and CSS code Now at last You have to create a Javascript file named script.js. after creating the file now paste the Below code in the js file. Remember to give .js extension to the javascript file.

console.clear();  
 const { gsap } = window;  
 const cursorOuter = document.querySelector(".cursor--large");  
 const cursorInner = document.querySelector(".cursor--small");  
 let isStuck = false;  
 let mouse = {  
      x: -100,  
      y: -100,  
 };  
 // Just in case you need to scroll  
 let scrollHeight = 0;  
 window.addEventListener('scroll', function(e) {  
      scrollHeight = window.scrollY  
 })  
 let cursorOuterOriginalState = {  
      width: cursorOuter.getBoundingClientRect().width,  
      height: cursorOuter.getBoundingClientRect().height,  
 };  
 const buttons = document.querySelectorAll("main button");  
 buttons.forEach((button) => {  
      button.addEventListener("pointerenter", handleMouseEnter);  
      button.addEventListener("pointerleave", handleMouseLeave);  
 });  
 document.body.addEventListener("pointermove", updateCursorPosition);  
 document.body.addEventListener("pointerdown", () => {  
      gsap.to(cursorInner, 0.15, {  
           scale: 2,  
      });  
 });  
 document.body.addEventListener("pointerup", () => {  
      gsap.to(cursorInner, 0.15, {  
           scale: 1,  
      });  
 });  
 function updateCursorPosition(e) {  
      mouse.x = e.pageX;  
      mouse.y = e.pageY;  
 }  
 function updateCursor() {  
      gsap.set(cursorInner, {  
           x: mouse.x,  
           y: mouse.y,  
      });  
      if (!isStuck) {  
           gsap.to(cursorOuter, {  
                duration: 0.15,  
                x: mouse.x - cursorOuterOriginalState.width/2,  
                y: mouse.y - cursorOuterOriginalState.height/2,  
           });  
      }  
      requestAnimationFrame(updateCursor);  
 }  
 updateCursor();  
 function handleMouseEnter(e) {  
      isStuck = true;  
      const targetBox = e.currentTarget.getBoundingClientRect();  
      gsap.to(cursorOuter, 0.2, {  
           x: targetBox.left,   
           y: targetBox.top + scrollHeight,  
           width: targetBox.width,  
           height: targetBox.width,  
           borderRadius: 0,  
           backgroundColor: "rgba(255, 255, 255, 0.1)",  
      });  
 }  
 function handleMouseLeave(e) {  
      isStuck = false;  
      gsap.to(cursorOuter, 0.2, {  
           width: cursorOuterOriginalState.width,  
           height: cursorOuterOriginalState.width,  
           borderRadius: "50%",  
           backgroundColor: "transparent",  
      });  
 }

That’s all after pasting all the code in the file now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Source :- Codepen.io

Social Media Icon using HTML CSS Javascript

Social Media Icon using HTML CSS Javascript [Source code]

You might like this

Leave a Comment Cancel reply

Quick Link