EN
CSS - glowing effect on hover
0
points
In this article, we would like to show you how to achieve glowing effect on hover using CSS.
How to achieve glowing effect:
- set dark
background-colorproperty, - set text opacity using
colorproperty (rgba()the fourth argument) to 80% (0.8), so you can disable it on hover effect, - use the
box-shadowproperty with a bright color to make it appear like it is glowing, - use transition property for a better effect.
Practical example
In this example, we present how to achieve the glowing effect with the div element using CSS.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
background: #525252;
text-align: center;
padding: 20px;
}
div {
width: 100px;
color: rgba(255, 255, 255, 0.8);
background: #3085d6;
padding: 20px;
margin: auto;
border-radius: 5px;
transition: 0.5s;
}
div:hover {
color: white;
box-shadow: 0 5px 15px #afe0f5;
}
</style>
</head>
<body>
<div>Hover me.</div>
</body>
</html>