CODEWITHSUNDEEP
htmlcss
Geoff Atkins
Geoff Atkins

Reputation: 1703

Slide animation text color change

I have a button that has a background color slide in from the right on hover, which works fine, however I need the text color to change as well. I have managed to have it fade, but that doesn't work properly. What I would like is a color transition slide in from the right in concert with the background change.

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}
<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

I have seen this question, but the only solution is unfeasible in this instance. Sliding in changing text color animation

Is there some CSS trick I am missing? Google searches don't result in anything pointing me in the right direction, so I am concerned I am attempting the impossible.

I'm happy to utilise JS or jQuery if it will accomplish what I want.

Upvotes: 8

Views: 5521

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

Just providing an alternative using pseudo elements. Works fine on chrome.

.slideybutton {
  position: relative;
}
.slideybutton:hover {
  /* to fix a bug in IE */
}
.slideybutton:hover::after {
  width: 100%;
}
.slideybutton::before {
  content: attr(title);
  color: blue;
}
.slideybutton::after {
  content: attr(title);
  position: absolute;
  left: 0;
  width: 0;
  top: 0;
  bottom: 0;
  color: white;
  transition: width 1s linear;
  background-color: blue;
  white-space: nowrap;
  overflow: hidden;
}
<a class="slideybutton" title="Lorem ipsum dolor sit amet.">

</a>

Upvotes: 3

Michał Szachniewicz
Michał Szachniewicz

Reputation: 226

This could be done by "combining the text with the background", the key is property background-clip, check this out: 

.slideybutton { 
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, blue 50%, white 50%),
                    linear-gradient(to right, white 50%, blue 50%);
  transition: background-position 1s linear; 
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box; 
  color: transparent; 

} 
.slideybutton:hover { 
  background-position: -100% 0; 
}
<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

Upvotes: 8

hairmot
hairmot

Reputation: 2975

i don't think you'll be able to do this elegantly using a pure css solution at the moment. backdrop filters look promising for what you want to achieve - you would slowly overlay an element with a backdrop filter - this would apply the filter to the text as you move across it.

Check out more here https://webkit.org/demos/backdrop-filter/

Upvotes: 1

Related Questions