Can't transition background-color

Question

I'm trying to create a transition of two different background-color's on hover.

I've looked up different solutions but none of them have worked out so far. I have also attempted using -webkit-transition and transition and neither have worked so far.

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
  transition: box-shadow 0.3s ease-in-out;
}

<a href="#"> Buttton </a>

By two background colors, what do you mean? are you refering to the box-shadow and background-color? — Mosia Thabo, Aug 07 '19 at 01:04
Also your box-shadow provides a with of (-) number - that doesn't make it visible. — Mosia Thabo, Aug 07 '19 at 01:11
Instead of box-shadow in transition property put it ```all``` and remove transition in hover — Krishna Kamal, Aug 07 '19 at 01:28

score 1 · Answer 1 · answered Aug 07 '19 at 01:19

Please note:

Transitions are defined within the actual block not the event block.

e,g a{here...} and a:hover{not here...}

Below is the transition of background-color and box-shadow property of style object.

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: 0.3s ease-in-out;
  
  transition-property: box-shadow, background-color;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px 10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px 10px #282936; /* rgba(166,173,201,0.2) */
}

<a>Check this out</a>

score 0 · Answer 2 · answered Aug 07 '19 at 00:33

0

The box-shadow should be applied to the :hover, while the transition should be applied to the root element:

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73;
  transition: box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
}

<a href="#">Hover over me</a>

answered Aug 07 '19 at 00:33

Obsidian Age

41,205
10
48
71

this only works for box-shadow. background-color doesn't seem to transition – Mosia Thabo Aug 07 '19 at 01:06
Just need to add `transition-property: all;` to the first CSS block – Pablo Aug 07 '19 at 02:31

score 0 · Answer 3 · answered Aug 07 '19 at 00:41

If you want to create a background-color transition, then change box-shadow in a style to background-color

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: background-color 0.3s ease-in-out; /* Change transition-property from box-shadow to background-color */
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
}

`a` is actually a box with text in it and I have successfully worked out the shadow and box colour transitions thanks to you guys, now is there anyway I can create a transition from the `a` `color` tag to the `a:hover` `color` tag? Edit: Got it worked out, nevermind. — , Aug 07 '19 at 00:53

score 0 · Answer 4 · answered Aug 07 '19 at 00:44

If you are looking to transition the background color, you will need to include that property in you transition.

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: 
    background-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
  transition: 
   background-color 0.3s ease-in-out,
   box-shadow 0.3s ease-in-out;
}

https://next.plnkr.co/edit/Udj72JIVEIQdQUbR

Can't transition background-color

4 Answers4