Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far.
The issue I'm facing is with the CSS transition effect - while I have set it up to ease, it's not behaving as expected. My goal is to have both the button text and the :after text ease simultaneously. However, what's happening now is that the button text eases first followed by the :after text easing, causing a bit of a delayed transition.
Below is the code snippet 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 class="button gform_button" id="gform_submit_button_1">
<span>Submit</span>
</button>I have a feeling that my issue lies in the transition property. Could it be because I've used all, which affects each item individually? Initially, I tried switching from all to color thinking it would solve the problem, but it still shows the same delayed behavior - the button text transitioning first, then after 0.5s the :after text transitions.
Unfortunately, I can't modify the existing code since the button is dynamically generated by a WordPress site. This is why utilizing :after seemed like the best approach most of the time.
Do you have any suggestions on how I could tweak things so that both the button text and the :after text change color simultaneously during the transition?