CSS Glassmorphism Button Hover Effects

CSS Glassmorphism Button Hover Effects
Code Snippet:CSS Glassmorphism Button Hover Effects
Author: Alexy
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,517
License: MIT
Edit Code online: View on CodePen
Read More

Glassmorphism is a design trend that mimics frosted glass. This HTML and CSS code snippet helps you to create captivating Glassmorphism Button Effects on the hover event. When you mouseover these buttons, they transform with elegant glass-like animations. These effects are visually appealing and can enhance the interactivity of your website.

These effects grab users’ attention and make your site more engaging. They create a modern and stylish user experience, improving the overall website design. You can use this code on your website’s buttons to add eye-catching hover effects.

How to Create CSS Glassmorphism Button Hover Effects

1. Begin by setting up the HTML structure. You can add these buttons to any part of your webpage. Here’s a sample structure:

<div class="container">
  <div class="btn"><a href="#">Read More</a></div>
  <div class="btn"><a href="#">Read More</a></div>
  <div class="btn"><a href="#">Read More</a></div>
</div>

2. Now, let’s add the CSS code that creates the glassmorphism effect. This CSS code includes styling for the buttons, hover animations, and glassy properties. Import the required font and define the color variables.

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Onest', sans-serif;
}

:root{
  --color-white: #fff;
  --color-1:#350048;
  --color-2:rgba(255, 255, 255, 0.05);
  --color-3:rgba(0, 0, 0, 0.2);
  --color-4:rgba(255, 255, 255, 0.1);
  --color-gradient-1: rgba(255,255,255, 0.15);

}
.cd__main{
   background: var(--color-1) !important;
   min-height: 640px;
   align-items: center;
}
body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--color-1);
}

.container {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container .btn {
  position: relative;
  width: 155px;
  height: 50px;
  margin: 20px;
}

.container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-2);
  box-shadow: 0 15px 35px var(--color-3);
  border-top: 1px solid var(--color-4);
  border-bottom: 1px solid var(--color-4);
  border-radius: 30px;
  color: var(--color-white);
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.8s;
  backdrop-filter: blur(15px);
}

.container .btn:hover a {
  letter-spacing: 3px;
}

.container .btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, var(--color-gradient-1), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.8s;
}

.container .btn:hover a::before {
    transform: skewX(45deg) translateX(200%);
}

.container .btn::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: 0.8s;
  transition-delay: 0s;
}

.container .btn:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}


.container .btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: 0.8s;
  transition-delay: 0s;
}

.container .btn:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.container .btn:nth-child(1)::before,
.container .btn:nth-child(1)::after {
  background: #ff1f71;
  box-shadow: 0 0 5px #ff1f71,
              0 0 15px #ff1f71,
              0 0 30px #ff1f71,
              0 0 60px #ff1f71;
}


.container .btn:nth-child(2)::before,
.container .btn:nth-child(2)::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff,
              0 0 15px #2bd2ff,
              0 0 30px #2bd2ff,
              0 0 60px #2bd2ff;
}

.container .btn:nth-child(3)::before,
.container .btn:nth-child(3)::after {
  background: #1eff45;
  box-shadow: 0 0 5px #1eff45,
              0 0 15px #1eff45,
              0 0 30px #1eff45,
              0 0 60px #1eff45;
}

Style the container and buttons with the desired width, height, and margin. Customize the appearance as per your design preferences. You can change the background colors and box shadows of individual buttons. Customize the colors to match your website’s theme.

That’s all! hopefully, you have successfully created Glassmorphism Buttons on your website. If you have any questions or suggestions, feel free to comment below.

1 thought on “CSS Glassmorphism Button Hover Effects”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X