CODEWITHSUNDEEP
csshovercss-transitions
wittich
wittich

Reputation: 2311

avoid on hover transition the different change speed for text and background-color

I have the problem that I have an hover effect which doesn't render the same change for text color as the background-color change.

gif example

Is there any way to avoid this different transition behavior?

Here a live example:

* {
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;  
    -o-transition: all 2s linear;  
    transition: all 2s linear;
}

.maps-btn {
    margin: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    color: blue;
}

.maps-btn a {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
}

.maps-btn i {
    font-size: 25px;
    vertical-align: sub;
}

.maps-btn:hover,
.maps-btn:hover i,
.maps-btn:hover a {
    background-color: blue;
    color: #fff;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maps-btn">
    <a href="https://www.google.com/maps/dir/?api=1&amp;destination=Frankfurt Main, Germany" target="_blank">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        Show on map
    </a>
</div>

Upvotes: 0

Views: 510

Answers (1)

arbuthnott
arbuthnott

Reputation: 3819

I got things to work in this fiddle. There were a couple of troubles:

  1. You were transitioning the background-color of your a and i elements from transparent to blue - you should just leave them transparent.
  2. The i had color inherit, which was causing weird behaviour as it and it's parent transitioned their color at the same time.

Changes: add color: blue; to your .maps-btn i css, and replace your hover css with:

.maps-btn:hover {
    background-color: blue;
}

.maps-btn:hover a i,
.maps-btn:hover a {
    color: #fff;
}

Upvotes: 2

Related Questions