Posted on April 9, 2021, 8 p.m. by Bishal ( 12140)
Hover over me
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Glowing Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
button
element to create a button.
<button class="glowing-button">Hover over me</button>
<a href="#" class="glowing-button">Hover over me</a>
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.container {
margin-top: 25%;
display: flex;
justify-content: center;
align-items: center;
}
.glowing-button{
padding: 20px 40px;
border: 3px; /* change this to change the border color and thickness */
font-weight: 700;
text-decoration: none;
letter-spacing: 2px; /* change this to change the spacing between the letters*/
color: black; /* change this to change font-color */
font-size: 40px; /*change this to change font size */
}
.glowing-button:hover{
animation: glow 1500ms infinite; /* change this to change the color of text after hover over the button */
}
@keyframes glow {
0% { background-color: #0ad2e0; box-shadow: 0 0 3px #0ad2e0; }
50% { background-color: #00d9ff; box-shadow: 0 0 40px #00d9ff; }
100% { background-color: #0a9fda; box-shadow: 0 0 3px #0a9fda; }
}
<!DOCTYPE html>
<html>
<head>
<title>Glowing Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="container">
<a href="#" class="glowing-button">Hover over me</a>
</div>
</body>
</html>
.container {
margin-top: 25%;
display: flex;
justify-content: center;
align-items: center;
}
.glowing-button{
padding: 20px 40px;
border: 3px; /* change this to change the border color and thickness */
font-weight: 700;
text-decoration: none;
letter-spacing: 2px; /* change this to change the spacing between the letters*/
color: black; /* change this to change font-color */
font-size: 40px; /*change this to change font size */
}
.glowing-button:hover{
animation: glow 1500ms infinite; /* change this to change the color of text after hover over the button */
}
@keyframes glow {
0% { background-color: #0ad2e0; box-shadow: 0 0 3px #0ad2e0; }
50% { background-color: #00d9ff; box-shadow: 0 0 40px #00d9ff; }
100% { background-color: #0a9fda; box-shadow: 0 0 3px #0a9fda; }
}