Hello readers, today in this vdieo I am going show you how to create Glassmorphism shiny glass social media icon hover effect using HTML and CSS. You easily create this Glassmorphism design using HTML by follow these tutorials and steps. You will build this awesome Glassmorphism hover effect design by just following this video tutorial or these steps which i given bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this design
This Glassmorphism design, which uses beautiful colors has gained the best of beauty. On this design, there is show on middle of the web page. there are FontAwesome social media icon with round small box. Web page two diffrents background colors. When hover the social icon then icon shiney effect and box come top.
Watch the video tutorial to create Glassmorphism Social Icon Hover Effects
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step. So you can learn how to make this beautiful glassmorphism design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this glassmorphism icon hover effect. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
How To Make Portfolio Website Using HTML & CSS
Glassmorphism Shiney Social Icon | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glassmorphism Icon Hover Effects</title>
<!----css custom file link-->
<link rel="stylesheet" href="style.css">
<!---Fontawesome CDN link----->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<ul>
<li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</section>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
section{
position: absolute;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #ff4f8b, #dff1ff);
}
section:before{
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
backdrop-filter: blur(5px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
section .color{
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1){
background: #ff359b;
width: 600px;
height: 600px;
top: -350px;
}
section .color:nth-child(2){
background: #00d2ff;
width: 500px;
height: 500px;
bottom: -150px;
left: 100px;
}
section .color:nth-child(3){
background: #fffd87;
width: 300px;
height: 300px;
bottom: 50px;
right: 0px;
}
ul{
position: relative;
display: flex;
z-index: 2;
}
ul li{
position: relative;
list-style: none;
margin: 10px;
}
ul li a{
position: relative;
width: 80px;
height: 80px;
display: inline-block;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
font-size: 2em;
border: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 5px 45px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
transition: 0.5s;
overflow: hidden;
}
ul li a:hover{
transform: translateY(-20px);
}
ul li a:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
transform: skewX(45deg) translateX(150px);
transition: 0.5s;
}
ul li a:hover:before{
transform: skewX(45deg) translateX(-150px);
}now you’ve successfully created this design using HTML and CSS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.
You should make a zip file for every project and upload zip on tha website