Languages
[Edit]
EN

CSS - glowing effect on hover

0 points
Created by:
Jan-Alfaro
341

In this article, we would like to show you how to achieve glowing effect on hover using CSS.

How to achieve glowing effect:

  1. set dark background-color property,
  2. set text opacity using color property (rgba() the fourth argument) to 80% (0.8), so you can disable it on hover effect,
  3. use the box-shadow property with a bright color to make it appear like it is glowing,
  4. 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>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join