"Icon CSS effect"
Bootstrap 4.1.1 Snippet by freecss.tech

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>icon effect</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> </head> <body> <ul> <li> <a href="#"><i class="fab fa-facebook-f"></i></a> </li> <li> <a href="#"><i class="fab fa-twitter"></i></a> </li> <li> <a href="#"><i class="fab fa-google-plus-g"></i></a> </li> <li> <a href="#"><i class="fab fa-linkedin-in"></i></a> </li> <li> <a href="#"><i class="fab fa-instagram"></i></a> </li> </ul> </body> <div class="youtube"> <a href="https://www.youtube.com/channel/UCsTtSQwqpqW0a3KpR0CPgIA" target="_blank">Click Here For More (880+) Awesome CSS Effects</a> </div> </html>
body{ margin: 0; padding: 0; background:#ccc; } p{ position: absolute; top:90%; left:40%; transform:translate(-50%;-50%); } ul{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); margin: 0; padding: 0; display: flex; } ul li{ list-style:none; margin: 0 40px; } ul li a .fab{ font-size: 40px; color:#262626; line-height:80px; transition:.5s; } ul li a{ position: relative; display:block; width:80px; height:80px; background:#fff; text-align: center; transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0); transition:.5s; box-shadow:-20px 20px 10px rgba(0,0,0,.5); } ul li a:before{ content: ''; position: absolute; top:10px; left:-20px; height:100%; width: 20px; background: #b1b1b1; transition: .5s; transform: rotate(0deg) skewY(-45deg); } ul li a:after{ content: ''; position: absolute; bottom:-20px; left:-10px; height:20px; width: 100%; background: #b1b1b1; transition: .5s; transform: rotate(0deg) skewX(-45deg); } ul li a:hover{ transform: perspective(100px) rotate(-30deg) skew(25deg) translate(20px,-20px); box-shadow:-50px 50px 50px rgba(0,0,0,.5); } ul li:hover .fab{ color:#fff; } ul li:hover:nth-child(1) a { background:#3b5999; } ul li:hover:nth-child(1) a:before { background:#2e4a86; } ul li:hover:nth-child(1) a:after { background:#4a69ad; } ul li:hover:nth-child(2) a { background:#55acee; } ul li:hover:nth-child(2) a:before { background:#4184b7; } ul li:hover:nth-child(2) a:after { background:#4d9fde; } ul li:hover:nth-child(3) a { background:#dd4b39; } ul li:hover:nth-child(3) a:before { background:#c04526; } ul li:hover:nth-child(3) a:after { background:#d65939; } ul li:hover:nth-child(4) a { background:#0077b5; } ul li:hover:nth-child(4) a:before { background:#026499; } ul li:hover:nth-child(4) a:after { background:rgb(3, 134, 204); } ul li:hover:nth-child(5) a { background:#eff05f; } ul li:hover:nth-child(5) a:before { background:#d4d452; } ul li:hover:nth-child(5) a:after { background:#e4e464; } .youtube { font-size:15px; position:fixed; bottom:10px; right:10px; background:#f00; font-family:verdana; padding:5px; border-radius:5px; animation:youtube .5s linear infinite; } .youtube a { text-decoration:none; color:#fff; } @keyframes youtube { 0% { transform:scaleX(1); } 50% { transform:scaleX(.95); } 100% { transform:scaleX(1); } }

Related: See More

Material Dashboard React
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations
Navbar with Social icon & Dropdown

Questions / Comments: