3d Social Icon
HTML CODE:-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="container"> <a href="#"> <div class="icon"> <span></span> <span></span> <span></span> <span></span> <span><i class="fa-brands fa-facebook"></i></span> </div> <div class="text">Facebook</div> </a> <a href="#"> <div class="icon"> <span></span> <span></span> <span></span> <span></span> <span><i class="fa-brands fa-youtube"></i></span> </div> <div class="text">Youtube</div> </a> <a href="#"> <div class="icon"> <span></span> <span></span> <span></span> <span></span> <span><i class="fa-brands fa-instagram"></i></span> </div> <div class="text">Instagram</div> </a> </div> </body> </html> |
CSS CODE:-
body{ padding: 0px; margin: 0px; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: black; } .container{ display: inline-flex; } .container a{ text-decoration: none; color: white; margin: 0 30px; position: relative; display: block; transition: 0.3s; } .container a:nth-child(1){ color: blue; } .container a:nth-child(2){ color: red; } .container a:nth-child(3){ color: pink; } .container a:hover .icon{ transform: rotate(-35deg) skew(20deg); } .icon{ width: 50px; height: 50px; transition: .3s; } .icon span{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: white; border-radius: 7px; border: 1px solid white; font-size: 25px; line-height: 50px; text-align: center; transition: all 0.3s; } .container a:nth-child(1) .icon span{ border-color: blue; color: blue; } .container a:nth-child(2) .icon span{ border-color: red; color: red; } .container a:nth-child(3) .icon span{ border-color: pink; color: pink; } a:hover span:nth-child(1){ opacity: 0.2; } a:hover span:nth-child(2){ opacity: 0.4; transform: translate(5px,-5px); } a:hover span:nth-child(3){ opacity: 0.6; transform: translate(10px,-10px); } a:hover span:nth-child(4){ opacity: 0.8; transform: translate(15px,-15px); } a:hover span:nth-child(5){ opacity:1; transform: translate(20px,-20px); } .text{ position: absolute; left: 50%; opacity: 0; transform: translateX(-50%); transition:0.3s ease; margin-top: 10px; } a:hover .text{ opacity: 1; } |