Execute CSS Transition at the same time-CodePudding

So, I have a button that has a Font Awesome icon added on the end of it. I am using :after on the button to display the icon, which is working great.

I have a CSS transition that eases, but it doesn't work how I expect. I would like both the button text and the :after text to ease at the same time. Right now, the button text eases then the :after text eases...not one fluid transition. It's like there is a 0.5s delay because of the transition.

Here's my code for the button:

.gform_button {
  background: #363794;
  border: 2px solid #363794;
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 20px 0 0;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.5s ease;
}

.gform_button:hover {
  color: #ff9b00;
  cursor: pointer;
}

.gform_button:after {
  color: #fff;
  content: "\f135";
  font: var(--fa-font-solid);
  font-size: 16px;
  margin-left: 5px;
}

.gform_button:hover:after {
  color: #ff9b00;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button  id="gform_submit_button_1">
  <span>Submit</span>
</button>

I am pretty sure the key is my transition tag, I'm thinking it's because I have transition: all because I know that effects each item individually. I've seen this before, so I thought it was a quick fix (initially). I thought if I changed all to color, I'd be in business, but that still functions the same way - the button text displays then after 0.5s the :after displays.

I can't adjust the actual code because the button is being generated by a WordPress site, which is why using :after is a great solution most of the time.

Is there a way I could redo things so that both of these (the button text and the :after) change color at the same time when they transition?

CodePudding user response：

It isn't that they're transitioning at different speeds – the text is transitioning colors while the icon is not. The icon just changes immediately when hovered.

That's because you've specified color values on the :after and :hover:after, and it's not transitioned.

The most obvious fix is to also add a transition to it, right?

But, even better: instead, remove the color values from the :after selector, and just let it inherit the parent's color!

(Also, you are correct that you should stay away from any – transitions are very performance expensive on most CSS properties, so you should always specify exactly which ones you want)

.gform_button {
  background: #363794;
  border: 2px solid #363794;
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 20px 0 0;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.5s ease;
}

.gform_button:hover {
  color: #ff9b00;
  cursor: pointer;
}

.gform_button:after {
  content: "\f135";
  font: var(--fa-font-solid);
  font-size: 16px;
  margin-left: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button  id="gform_submit_button_1">
  <span>Submit</span>
</button>