How to create a Colorful Glowing Effect on Hover using only HTML & CSS. As far as you can in the picture, there are two objects with colorful glowing effects. I have a button to move a text and a loading-circle with the same hover me text. Let's say those two objects are buttons. First, those buttons are in their initial state, where they don't have any glow effects. But when you hover over it, it will start flashing in the background.
If you like this program (Colorful Glowing Effect on Hover) and want to get source codes. You can easily get the source codes of this program.
HTML : Paste the following code above </body>
HTML
<head>
<meta charset="utf-8">
<title>Gradient Color Effect</title>
<link rel="stylesheet" href="style.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>
HTMLCSS
*{
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;
}
}