Hello Guys, In this article or video we will see Amazing Social Icons Shine Effect Using Only HTML & CSS. You will use this Amazing Social Icons Shine Effect on your website freely. If you learn How to create this Amazing Social Icons Shine Effect so watch my video from YouTube or below. And you wish to learn more amazing HTML, CSS, and JavaScript Effect or Tutorial so Subscribe to my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/
4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Glass Morphism Social Icons - Pure Coding</title>
</head>
<body>
<ul class="social-icons">
<li>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</li>
<li>
<a href="#" class="github"><i class="fa fa-github"></i></a>
</li>
<li>
<a href="#" class="stack-overflow">
<i class="fa fa-stack-overflow"></i>
</a>
</li>
<li>
<a href="#" class="youtube"><i class="fa fa-youtube-play"></i></a>
</li>
</ul>
</body>
</html>
Then add this code on the style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
}
.social-icons li {
list-style: none;
display: inline-block;
margin: 10px;
}
.social-icons li a {
display: block;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, .3);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .3);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
color: #FFF;
position: relative;
overflow: hidden;
transition: .4s;
}
.social-icons li a::after {
content: "";
position: absolute;
left: 90px;
width: 100%;
height: 100%;
background: #FFF;
transform: skewX(45deg);
pointer-events: none;
transition: .4s;
}
.social-icons li a:hover::after {
left: -90px;
}
.social-icons li a:hover {
background: #FFF;
transition-delay: .4s;
}
.social-icons li a.twitter:hover {
color: #1DA1F2;
}
.social-icons li a.linkedin:hover {
color: #0e76a8;
}
.social-icons li a.github:hover {
color: #24292e;
}
.social-icons li a.stack-overflow:hover {
color: #ef8236;
}
.social-icons li a.youtube:hover {
color: #FF0000;
}
