Hello Guys! Welcome to Coding Torque. In this blog, we are going to make a Glassmorphic icons hover effects using HTML and CSS. You must create this if you are a beginner and learning HTML and CSS.
Before we start, here are some more projects for you:
2. Tip Calculator using JavaScript
3. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Let's go step by step:
Step 1: HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glassmorphic icons hover effects using HTML and CSS - @codingtorque</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>
<body>
<!-- further code in next block -->
</body>
</html>Paste the below code in your <body> tag
<div class="block-container">
<div class="btn-back btn-back-1"></div>
<div class="btn-front">
<svg class="frame">
<rect rx="32" stroke="url(#gradient-half)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">
<path d="M12.3999 17.4999C11.8999 17.2999 11.2999 17.3999 11.0999 17.8999L9.29989 21.4999C8.99989 21.9999 9.19989 22.5999 9.69989 22.8999C9.79989 22.9999 9.99989 22.9999 10.1999 22.9999C10.5999 22.9999 10.8999 22.7999 11.0999 22.4999L12.8999 18.8999C13.0999 18.2999 12.8999 17.6999 12.3999 17.4999Z" fill="url(#gradient-full)" />
<path d="M17 17.4999C16.5 17.2999 15.9 17.3999 15.7 17.8999L13.9 21.4999C13.7 21.9999 13.8 22.5999 14.3 22.7999C14.4 22.8999 14.6 22.8999 14.8 22.8999C15.2 22.8999 15.5 22.6999 15.7 22.3999L17.5 18.7999C17.7 18.2999 17.5 17.6999 17 17.4999Z" fill="url(#gradient-full)" />
<path d="M7.89994 17.4999C7.39994 17.2999 6.79994 17.3999 6.59994 17.8999L4.79994 21.4999C4.59994 21.9999 4.69994 22.5999 5.19994 22.7999C5.29994 22.9999 5.49994 22.9999 5.59994 22.9999C5.99994 22.9999 6.29994 22.7999 6.49994 22.4999L8.29994 18.8999C8.59994 18.2999 8.39994 17.6999 7.89994 17.4999Z" fill="url(#gradient-full)" />
<path d="M15.2 1C12.4 1 9.9 2.5 8.5 4.8C8 4.7 7.5 4.6 7 4.6C3.7 4.6 1 7.3 1 10.6C1 13.9 3.7 16.6 7 16.6H15.2C19.5 16.6 23 13.1 23 8.8C23 4.5 19.5 1 15.2 1Z" fill="url(#gradient-full)" />
</svg>
</div>
</div>
<div class="block-container">
<div class="btn-back btn-back-2"></div>
<div class="btn-front">
<svg class="frame">
<rect rx="32" stroke="url(#gradient-half)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">
<path d="M12.2999 22.0001C9.59992 22.0001 6.99992 21.0001 4.99992 19.0001C0.999923 15.0001 0.999923 8.70009 4.89992 4.80009C6.29992 3.30009 8.19992 2.30009 10.2999 2.00009C10.6999 1.90009 11.0999 2.10009 11.2999 2.50009C11.4999 2.90009 11.4999 3.30009 11.1999 3.60009C8.99992 6.10009 9.19992 10.0001 11.5999 12.4001C13.9999 14.8001 17.7999 15.0001 20.2999 12.8001C20.5999 12.5001 21.0999 12.5001 21.3999 12.7001C21.7999 12.9001 21.9999 13.3001 21.8999 13.7001C21.5999 15.8001 20.5999 17.6001 19.1999 19.1001C17.2999 21.0001 14.7999 22.0001 12.2999 22.0001Z" fill="url(#gradient-full)" />
</svg>
</div>
</div>
<div class="block-container">
<div class="btn-back btn-back-3"></div>
<div class="btn-front">
<svg class="frame">
<rect rx="32" stroke="url(#gradient-half)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">
<path d="M8.49995 22.9999C8.19995 22.9999 7.89995 22.8999 7.59995 22.7999C6.79995 22.3999 6.39995 21.5999 6.59995 20.7999L7.79995 14.9999H5.99995C5.19995 14.9999 4.49995 14.4999 4.19995 13.7999C3.89995 13.0999 3.99995 12.2999 4.59995 11.7999L14.0999 1.6999C14.6999 1.0999 15.6999 0.899901 16.3999 1.2999C17.1999 1.6999 17.5999 2.4999 17.3999 3.2999L16.1999 9.0999H17.9999C18.7999 9.0999 19.4999 9.5999 19.7999 10.2999C20.0999 10.9999 19.9999 11.7999 19.3999 12.2999L9.89995 22.3999C9.49995 22.7999 8.99995 22.9999 8.49995 22.9999Z" fill="url(#gradient-full)" />
</svg>
</div>
</div>
<svg style="visibility: hidden; width: 0; height: 0;">
<defs>
<linearGradient id="gradient-full" x1="0%" y1="0%" x2="120%" y2="120%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#ffffff00" />
</linearGradient>
<linearGradient id="gradient-half" x1="-50%" y1="-50%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#ffffff00" />
</linearGradient>
</defs>
</svg>Step 2: CSS(SCSS) Code
Create a file style.scss and paste the code below.
Note: If you don't know how to run scss please check this article:
How to
use SASS in HTML
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
min-height: 400px;
background-color: #fbfbfb;
.block-container {
position: relative;
width: 120px;
height: 120px;
margin: 32px;
transition: 250ms;
perspective: 500px;
.btn-back {
position: absolute;
inset: 0;
z-index: -1;
width: inherit;
height: inherit;
border-radius: 32px;
transition: 250ms;
transform-style: preserve-3d;
transform-origin: bottom right;
transform: rotateZ(15deg);
will-change: transform;
box-shadow: 16px 0 40px #e4e4e4;
}
.btn-back-1 {
background: linear-gradient(135deg, #4682eb -20%, #01beff 120%);
}
.btn-back-2 {
background: linear-gradient(135deg, #5c46eb -20%, #013fff 120%);
}
.btn-back-3 {
background: linear-gradient(135deg, #ebe046 -20%, #ffac01 120%);
}
.btn-front {
position: absolute;
inset: 0;
z-index: 1;
width: inherit;
height: inherit;
border-radius: 32px;
background-color: #ffffff33;
backdrop-filter: blur(20px);
transition: 250ms;
transform-style: preserve-3d;
transform-origin: top left;
overflow: hidden;
svg.frame {
width: inherit;
height: inherit;
rect {
width: inherit;
height: inherit;
fill: none;
stroke-width: 4;
}
}
svg.icon {
position: absolute;
inset: 50% 0 0 50%;
transform: translate(-50%, -50%);
}
}
&:hover {
& > .btn-back {
transform: translateZ(20px) rotateZ(15deg) rotateX(-20deg) rotateY(-20deg);
}
& > .btn-front {
transform: translateZ(80px) translateY(-5px) rotateX(15deg) rotateY(15deg);
}
}
}
}
@media (max-width: 600px) {
body {
flex-direction: column;
}
} Output Till Now
Written by: Coding Torque | Piyush Patil
If you want me to code any project or post any specific
post, feel free
to DM me at IG @code.scientist or @codingtorque
If you have any doubts or any project ideas feel free to
Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻