M/s VIKASH TECH - We Write Imaginations to Codes..!!

Colorful Glowing Effect on Hover using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Colorful Glowing Effect on Hover using only HTML & CSS.
As you can in the image, there are two objects with Colorful Glowing Effects. There is a one-button with hover me a text and one loader-circle with the same hover me text. Assuming Those two objects are buttons.
At first, those buttons are in the initial stage where there are no glow effects on it. But when you hover on it, it will be started to glowing in the background.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Gradient Color Effect | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="center">
      <div class="outer button">
        <button>Hover Me</button>
        <span></span>
        <span></span>
      </div>
<div class="outer circle">
        <button>Hover Me</button>
        <span></span>
        <span></span>
      </div>
</div>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.center{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.outer{
  position: relative;
  margin: 0 50px;
  background: #111;
}
.button{
  height: 70px;
  width: 220px;
  border-radius: 50px;
}
.circle{
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.outer button, .outer span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.outer button{
  background: #111;
  color: #f2f2f2;
  outline: none;
  border: none;
  font-size: 20px;
  z-index: 9;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.button button{
  height: 60px;
  width: 210px;
  border-radius: 50px;
}
.circle button{
  height: 180px;
  width: 180px;
  border-radius: 50%;
}
.outer span{
  height: 100%;
  width: 100%;
  background: inherit;
}
.button span{
  border-radius: 50px;
}
.circle span{
  border-radius: 50%;
}
.outer:hover span:nth-child(1){
  filter: blur(7px);
}
.outer:hover span:nth-child(2){
  filter: blur(14px);
}
.outer:hover{
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
@media (max-width: 640px){
  .center{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .outer{
    margin: 50px 0;
  }
}
Category :

Comments

No comments found.

Leave a Comment

….

JOIN TODAY

Affiliate Marketing

Latest Posts

Custom Warning Alert Notification using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Custom Warning Alert Notification using HTML CSS &…

Popup Login Form Design in HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Popup Login Form Design using only HTML &…

Popup Subscription Form using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Popup Subscription Form or Modal Box using HTML…

Custom Modal Box using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Dialog or Modal Box using HTML CSS &…

Tags