Hello developers, today in this blog you will learn to create a Glowing Effect on Hover using HTML & CSS.
The effect is used for applying glowing texture in an object or around the object when hovering. The glow effect displays a bright-colored text. The colors will glow in a running mode of the text. The glow effect was mainly used to attract visitors to the text or the sentence.
In this blog (Glowing Effect on Hover), on the webpage, there is some text at the center of the webpage. When you hover on the text, the text will display you with a glow effect. The text will glow with the running effect of the sentence. It can be used on the website to attract your content on the webpage. This animation was made by using the CSS @keyframes property.
The source code of this Glowing Effect on Hover using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Glowing Effect on Hover with your creativity and can take this project to the next level.
Glowing Effect on Hover [Source Code]
To make this website (Glowing Effect on Hover), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
background-color: #000;
}
.btn {
width: 370px;
font-size: 20px;
height: 90px;
border: none;
outline: none;
background: black;
cursor: pointer;
position: relative;
border-radius: 10px;
}
.words {
color: white;
font-size: 1.9em;
background-image: none;
font-weight: bold;
letter-spacing: 5px;
}
.btn:hover .words {
background: linear-gradient(124deg,
#dd00f3 1%,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3);
-webkit-background-clip: text;
-webkit-text-stroke: 2px transparent;
color: #000;
animation: glowing 20s linear infinite;
background-size: 200%;
opacity: 0;
transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}
.btn:hover .words {
opacity: 1;
}
.btn:before {
content: "";
background: linear-gradient(90deg,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3);
position: absolute;
top: -2px;
left: -2px;
background-size: 200%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(50% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.btn:hover:before {
opacity: 1;
}
.btn:hover.btn:after {
opacity: 1;
}
.btn:after {
content: "";
background: linear-gradient(90deg,
#dd00f3,
#dd00f3,
#2b1de8,
#1ddde8,
#1de840,
#e3e81d,
#e8b71d,
#e81d1d,
#ff2400,
#dd00f3,
#dd00f3,
#2b1de8,
#1ddde8,
#1de840,
#e3e81d,
#e8b71d,
#e81d1d,
#ff2400);
position: absolute;
top: calc(50% - 2px);
left: -2px;
background-size: 200%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(50% + 4px);
animation: glowing-reverse 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
100% {
background-position: 400% 0;
}
}
@keyframes glowing-reverse {
0% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.credit{
text-align: center;
color: #fff;
margin-top: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: tomato;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Glowing Effect on Hover using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team