3D Social Media Icons Hover Effect using HTML CSS

Premium 3D Social Media Icons Hover Effect | HTML And CSS - FAMOUSCODE.DEV

UI/UX DESIGN

3D Social Media Icons Hover Effect

Create premium 3D social icons with smooth isometric animation.

🖼️ Visual Preview

💻 Complete Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #e8e8e8; font-family: sans-serif; }
        ul { display: flex; gap: 40px; list-style: none; }
        ul li a { position: relative; display: block; width: 60px; height: 60px; background: #fff; text-align: center; transform: perspective(1000px) rotate(-30deg) skew(25deg); transition: 0.5s; box-shadow: -15px 15px 10px rgba(0,0,0,0.1); }
        ul li a::before { content: ""; position: absolute; top: 5px; left: -10px; height: 100%; width: 10px; background: #b1b1b1; transform: rotate(0deg) skewY(-45deg); transition: 0.5s; }
        ul li a::after { content: ""; position: absolute; bottom: -10px; left: -5px; width: 100%; height: 10px; background: #b1b1b1; transform: rotate(0deg) skewX(-45deg); transition: 0.5s; }
        ul li a .fa-brands { font-size: 30px; color: #262626; line-height: 60px; transition: 0.5s; }
        ul li:hover a { transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(15px, -15px); background: var(--clr0); box-shadow: -40px 40px 40px rgba(0,0,0,0.2); }
        ul li:hover a::before { background: var(--clr1); }
        ul li:hover a::after { background: var(--clr2); }
        ul li:hover a .fa-brands { color: #fff; }
    </style>
</head>
<body>
    <ul>
        <li style="--clr0: #ff0050; --clr1: #990030; --clr2: #ff266a;"><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
        <li style="--clr0: #4267b2; --clr1: #283e6b; --clr2: #5a7cc2;"><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
        <li style="--clr0: #cd201f; --clr1: #7b1313; --clr2: #e03635;"><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
    </ul>
</body>
</html>

📖 Technical Explanation

In this project, we utilize the CSS Transform property combined with perspective to create a depth effect. The 3D walls are created using ::before and ::after pseudo-elements, which are skewed to match the isometric angle of the main icon box.

Want more premium UI code?

Follow @famouscode.dev

Article curated by Mohd Rihan

Create Password Toggle Button using HTML CSS | Show/Hide Password Input

Modern Password Show/Hide Toggle | HTML and CSS Tutorial - FAMOUSCODE.DEV Modern Password Show/Hide Toggle (HTML & CSS) Boost your login form UX with this simple yet powerful visibility toggle component. ✨ Live Preview FAMOUSCODE Show Password 💻 Full Source Code Copy the production-ready code for your next project. Copy Code Password Toggle - FamousCode FAMOUSCODE Show Password 🔍 How it Works? The logic is simple but effective. We use a JavaScript event listener to detect changes on the checkbox. When the state is checked , we dynamically change the input's type attribute from password to text . This reveals the characters to the user, ensuring they've typed the correct credentials. ...

How to Add a Modern Reading Progress Bar to Blogger (HTML & CSS)

Custom Scroll Progress Box | FAMOUSCODE.DEV UI Architecture Scroll-Sync Progress Container Enhance your user interface by syncing scroll position with a sticky progress indicator. Interactive Preview Scroll down to see the magic... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Neque porro quisquam est, qui d...

Create a Custom Right-Click Context Menu: Modern HTML & CSS Tutorial

UI Masterclass Custom Right-Click Context Menu Replace the boring browser menu with a premium, animated custom menu using simple CSS. Right-Click anywhere inside this box! ✨ Refresh Page 📂 View Source 🔒 Close Menu custom-menu.html Copy Code  <div id="container" style="height: 100vh;"> <ul id="menu" style="display: none; position: absolute;"> <li>Refresh</li> <li>Copy</li> </ul> </div> <script> const menu = document.getElementById('menu'); // 1. Detect Right Click window.addEventListener('contextmenu', (e) => { e.preventDefault(); // Stop default menu menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';...

Pure CSS Form Validation using :has() Selector (2026 Guide)

Advanced Pure CSS Form Validation Revolutionize your Web UI with the power of :has() and :invalid selectors. No JavaScript required! Why Pure CSS Validation is Trending in 2026 Web performance is the number one ranking factor today. By eliminating heavy JavaScript for simple tasks like form validation, you significantly reduce the First Input Delay (FID) and improve your site's SEO score. The :has() selector is a game-changer, allowing us to style parent elements based on input states effortlessly. ⚡ Lightning Fast Instant validation feedback without waiting for scripts to load. 🔒 Secure & Reliable Built-in browser logic ensures consistent behavior across modern platforms. 📱 Mobile Optimized Perfect fo...

How to Build a Modern Glassmorphism Navbar with Spotlight Effect

Ultra-Modern Glass Navigation In this tutorial, we are using the backdrop-filter CSS property to create a professional frosted glass look. We also added a Dynamic Spotlight that follows your mouse. Home Projects Services Contact Full Source Code index.html Copy Code <!DOCTYPE html> <html> <head> <style> body { background: #000; display: flex; justify-content: center; padding-top: 100px; } .glass-nav { display: flex; gap: 15px; padding: 10px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; position: relative; } .link { color: #fff; text-decoration: none; padding: 10px 25px; font-family: sans-serif; font-size: 15px; border-radius: 50px; transition: 0.3s; } .link:hover { background: rgba(255, 255, 255, ...

How to Create a Modern Toggle Navigation Menu with Pure HTML & CSS

Full Project Code Responsive Toggle Navigation Menu Copy and paste this complete code into your project for a professional floating menu. Home About Contact Click the icon to test the toggle complete-source-code.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Menu - FamousCode</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background: #f0f2f5; display: flex; justify-content: center; padding-top: 100px; } .navbar { position: relative; } .toggle-btn { background: #fff; border: 1px solid #ddd; width: 50px; height: 50px; border-radius: 10px; cursor: ...

How to Build a 3D Flipping Glassmorphism Credit Card with CSS

Premium 3D Glassmorphism Credit Card Create a realistic 3D Flipping Card with Glassmorphism effects. Perfect for adding a premium touch to your web projects. **** **** **** 5678 FAMOUSCODE.DEV 999 AUTHORIZED SIGNATURE REQUIRED Full Source Code index.html Copy Full Code <!DOCTYPE html> <html lang="en"> <head> <style> body { background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; margin: 0; } .card { width: 300px; height: 180px; position: relative; transition: 0.8s; transform-style: preserve-3d; cursor: pointer; } .card:hover { transform: rotateY(180deg); } .side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radiu...

10+ Modern CSS Properties Every Developer Should Know (2026 Guide)

Advanced UI Kit 11 Modern CSS Properties for Pro UI Enhance your Website's UI/UX with these hidden CSS gems by FAMOUSCODE.DEV. 01. Caret-Color Customizes the blinking text cursor color. input { caret-color: #f43f5e; } 02. Accent-Color Themes native checkboxes and radio buttons. input { accent-color: #10b981; } 03. Tap-Highlight-Color Removes the annoying blue box on mobile clicks. TAP ME ON MOBILE * { -webkit-tap-highlight-color: transparent; } 07. Scrollbar-Width & Display Allows you to hide the scrollbar while keeping the scrolling functionality active. Perfect for clean sidebars or horizontal lists. Scroll me horizontally → No visible scrollbar here! This looks much cleaner. .hide-scroll::-webkit-scrollbar { display: none; } 08. Object-Fit Fixes distorted images! object-fit: cover ensures your images fill the box per...

How to Create a Typing Animation for Input Placeholders

How to Create Dynamic Typing Placeholder in HTML/JS - FAMOUSCODE.DEV Dynamic Typing Animation Level up your forms with a smooth typing placeholder effect using pure Vanilla JavaScript . No heavy libraries, just clean code by Mohd Rihan . 🚀 Interactive Preview Experience the "Typing" feel in real-time. 💻 Get the Source Code INDEX.HTML COPY CODE  <input id="type-input" placeholder="|"> <script> const target = document.getElementById('type-input'); const hints = ['Enter Full Name', 'Enter @Instagram', 'Enter Email ID']; let wordIndex = 0, charIndex = 0, isWaiting = false; setInterval(() => { if (isWaiting) return; target.placeholder = hints[wordIndex].slice(0, ++charIndex) + '|'; if (charIndex > hints[wordIndex].length) { isWaiting = true; ...

Famous Code Dev

Search This Blog