sonorous track mized using javascript with source code

Glassmorphic icons hover effects using HTML and CSS – Coding Torque

Share your love

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 JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

 

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

 

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>

 

Output Till Now

 

CSS Code 

Create a file style.css and paste the code below.

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: Piyush Patil
Code Credits: @tin-fung-hk

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖
Share your love

Related Posts