CSS Glassmorphism Button Hover Effects

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.