Social Media Icon | Create Icon using Html Css Javascript







Social Media Icon | Create Icon using Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Social Media Icon. We use HTML, Css, and javascript for this Social Media Icon. Hope you enjoy our blog so let’s start with a basic HTML structure for a Social Media Icon.

HTML 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>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>

There is all HTML code for the Social Media Icon. Now, you can see output without CSS, then we write css & javascript for the Social Media Icon.

output

Social Media Icon | Create Icon using Html Css Javascript

CSS Code

 * {  
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);
}

Here is our updated output CSS.

output

Social Media Icon | Create Icon using Html Css Javascript

Javascript code 

 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",
});
}

Final output

Social Media Icon | Create Icon using Html Css Javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Social Media Icon. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

Leave a Comment