Social Media Icon With Hover Effect Using HTML & CSS
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.
I know you definitely think why I use javascript code in this social media icon we use an extreme level hover effect so we need javascript to achieve that effect so let’s start the code.
Hope you enjoy our blog so let’s start with a basic html structure for a Social Media Icon.
HTML Code For Social Media Icons
<!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/[email protected]/dist/ionicons.js"></script> <script src="index.js"></script> </html>
There is all the HTML code for the Social Media Icon. Now, you can see output without CSS, then we write CSS & JavaScript for the Social Media Icons.
* {
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 Html and Css.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
JavaScript Code For Social Media Icons
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",
});
}50+ Html, Css &Javascript Projects With Source Code
Final Output Of Social Media Icons
this is codepen live output, so you see here is scss(css). we convert this scss into css in our project if you need scss you can get it from here.
We have completed our Social Media Icon. Here is our updated output with html,css, and javascript. Hope you like the Social Media Icon with the Hover effect. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Thank You And Keep Learning!!!
Written by – Code With Random/Anki
Codepen by – Sikriti Dakua
![Read more about the article 15+ Hamburger Menu Using JavaScript [ Demo + Code ]](https://www.codewithrandom.com/wp-content/uploads/2022/11/codewithrandom61-300x157.png "15+ Hamburger Menu Using JavaScript [ Demo + Code ]")
