Awesome Glassmorphism Button Hover Effects Using Only HTML & CSS @informativeworld713

Learn Awesome Glassmorphism Button Hover Effects Using Only HTML & CSS @informativeworld713. Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

Are you looking to add some eye-catching button hover effects to your website? Look no further! In this tutorial, we will show you how to create awesome glassmorphism button hover effects using only HTML.

Glassmorphism is a modern design trend that gives elements a glass-like appearance. It adds depth and transparency, making them visually appealing and engaging. By applying glassmorphism to button hover effects, you can create stunning and interactive elements that will impress your website visitors.

Step 1: Setting up the HTML structure

To get started, create a new HTML file and add the following code:

<!-- HTML code -->

This code sets up the basic structure for our button hover effects. We have a container div with three buttons inside. Each button has a unique ID which we will use to apply the hover effects.

Step 2: Styling the buttons

Next, let’s add some CSS to style our buttons:

/* CSS code */

In this code, we set the basic styles for our buttons, such as the background color, font size, and padding. We also add a transition property to create a smooth transition effect when the buttons are hovered over.

Step 3: Adding the glassmorphism effect

Now comes the fun part – adding the glassmorphism effect to our buttons. We can achieve this by using a combination of box-shadow and background-blur CSS properties:

/* CSS code */

By applying a box-shadow with a blur effect and a semi-transparent background color, we can create the glass-like appearance. The transition property ensures that the effect smoothly transitions on hover.

Step 4: Creating the hover effects

Finally, let’s add the hover effects to our buttons:

/* CSS code */

In this code, we define the hover styles for each button. When a button is hovered over, we increase the box-shadow blur value and change the background color to create a more pronounced glassmorphism effect. The transition property ensures a smooth transition between the normal and hover states.

Step 5: Testing and customization

That’s it! Save your HTML file and open it in a web browser to see the awesome glassmorphism button hover effects in action. You can further customize the effects by tweaking the CSS properties to match your website’s design.

Now you know how to create stunning glassmorphism button hover effects using only HTML. Take your website to the next level with these eye-catching and interactive elements that are sure to impress your visitors!

Related:https://cssanimation.shop/rounded-pulse-button-hover-shadow-effect-informativeworld713/

Watch Our More Videos On YouTube

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism button</title>
</head>

<body>
  <div class="container">
    <div class="btn"><a href="#">Hover Me</a></div>
    <div class="btn"><a href="#" >Hover Me</a></div>
        <div class="btn"><a href="#" >Hover Me</a></div>

  </div>    
</body>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222
}
.container {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.container .btn {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 50px;
  margin:20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  font-weight: 400px;
  z-index: 1;
  transition: 0.5s;
  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, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}
.container .btn:hover a::before {
  transform: skewX(45deg) translate(200px);
}
.container .btn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}
.container .btn:hover::before /*lightup button*/ {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}
.container .btn a:hover{
  color:#000
}
.container .btn:hover::after /*lightup button*/ {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}
.container .btn:nth-child(1)::before, /*chnage 1*/
.container .btn:nth-child(1)::after {
  background: #FC002E;
  box-shadow: 0 0 5px #FC002E, 0 0 15px #FC002E, 0 0 30px #FC002E,
    0 0 60px #FC002E;
}
.container .btn:nth-child(2)::before, /* 2*/
.container .btn:nth-child(2)::after {
  background: #FFFFFF;
  box-shadow: 0 0 5px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF,
    0 0 60px #FFFFFF;
}
.container .btn:nth-child(3)::before, /* 3*/
.container .btn:nth-child(3)::after {
  background: #FF9206;
  box-shadow: 0 0 5px #FF9206, 0 0 15px #FF9206, 0 0 30px #FF9206,
    0 0 60px #FF9206;
}
One thought on “How to Create Awesome Glassmorphism Button Hover Effects By Kainat Ijaz”

Leave a Reply

Your email address will not be published. Required fields are marked *