Question 45183 in Html Question posted in
Some basic documentation can be found here.

How to make the shadow fade in (css stylesheet for html)

I want to make it so when somebody hovers over a button, some glow fades in. I tried that with this code:

     .discord_join_button:hover{
        color: rgba(255, 255, 255, 1);
        box-shadow: 0 0px 60px #2332d8;
        animation-duration: 500ms;
    }

for some reason this isn’t working and the box-shadow just pops into existence

I was expecting it to fade, not just show up

Tags:

2

Answers


  1. 0 
         .discord_join_button{
        color: rgba(255, 255, 255, 1);
        box-shadow: 0 0px 60px rgba(0,0,0,0);
        transition: 500ms;
    }

     .discord_join_button:hover{
        box-shadow: 0 0px 60px rgba(0,0,0,1);
    }

    Use rgba.
    And transition should be applied before hover.

    I don’t know if it’s what you want, but if you write the box-shadow value in reverse, it’s also possible to make it work in reverse.

    Login or Signup to reply.
  2. 0

    you can achieve the "fade in" effect by specifying the transition property to the button base style. For example:

    .discord_join_button {
    color: rgba(255, 255, 255, 1); 
    transition: all 200ms ease;
}

.discord_join_button:hover {
    box-shadow: 0 0 60px #2332d8; 
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition</title>
</head>
<body>
    <button class="discord_join_button">Hover me</button>
</body>
</html>

    If you want to know more about the transition property: here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search