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.
In this example, we present how to achieve the glowing effect with the div element using CSS.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
background: #525252;8
text-align: center;9
padding: 20px;10
}11
12
div {13
width: 100px;14
color: rgba(255, 255, 255, 0.8);15
background: #3085d6;16
padding: 20px;17
margin: auto;18
border-radius: 5px;19
transition: 0.5s;20
}21
22
div:hover {23
color: white;24
box-shadow: 0 5px 15px #afe0f5;25
}26
27
</style>28
</head>29
<body>30
<div>Hover me.</div>31
</body>32
</html>