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

Why does transition not work for a button? – Html

The code looks completely normal and working, yet behaves as if all transitions are commented out.

Here is the code i currently have for the button:

.button {
  font-size: 19px;
  text-decoration: none;
  color: white;
  background: black;
  padding: 16px 38px;
  border-radius: 8px;
  border: 2px solid #0000;
  transition: all 500ms;
}
.button:hover {
  background: white;
  color: black;
  border-color: black;
  transition: all 500ms;
}

, yet it’s color isn’t animated on hover. It’s just an instant transition. Why?

I tried to remove all, i tried to swap 500ms for 0.5s, and i tried to add linear. Nothing changed.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I looked through my code, and realised, that .button was an <a> tag, and transition doesn't work for <a>, i guess. The code was like so:

    <a href=# class=button>Click me!</a>

    The problem is now fixed, by changing the code to this:

    <a href=#><div class=button>Click me!</div></a>

  2. 0

    Here is a snippet of your code. I added some HTML markup for making it work.

    It functions perfectly here.

    .button {
  font-size: 19px;
  text-decoration: none;
  color: white;
  background: black;
  padding: 16px 38px;
  border-radius: 8px;
  border: 2px solid #0000;
  transition: all 500ms;
}
.button:hover {
  background: white;
  color: black;
  border-color: black;
  transition: all 500ms;
}
    <div>
  <button class="button"> Click me! </button>
</div>
    Login or Signup to reply.
  3. 0

    So here basically transition is expected to work on time of changing color on hover.
    I just modified it to 2000ms just for you to realize thats its working.

    .button {
  font-size: 19px;
  text-decoration: none;
  color: white;
  background: black;
  padding: 16px 38px;
  border-radius: 8px;
  border: 2px solid #0000;
  transition: all 2000ms;
}
.button:hover {
  background: white;
  color: black;
  border-color: black;
  transition: all 500ms;
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Why does transition not work for a button? -->
   
</head>
<body>
<button class="button">
    test
</button>
</body>
</html>

    and another possibility in your case might be you are expecting it to work on tag but defined it as a class (I am not sure, and also not considering you as dumb)

    but in first Attempt I did the same while trying.

    Thanks.
    Let me know if it worked

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

Back To Top
Search