0

I have this example snippet code for the anchor tag link. How do you hover a background color from bottom to top using transition?

I have found this reference link but this is not what I want to do in my css, it is using pseudo element before and after.

before and after pseudo element transition

.container {width:1000px; max-width:100%; margin:0 auto; padding:0; text-align:center;}
a {margin:0 auto;text-decoration:none;width:150px; height:30px; background: red; display:block; border: 1px solid black; color:#fff;border-radius:20px; text-align:center;transform-origin: left top;
  transition: all 1s ease;}
a:hover {background: green; color:black; border:1px solid green;}
<div class="container">
<a href="#">Lorem Ipsum Dolor</a>
</div>

Is it using css properties transition and transform to do this? Please help, I'm quite new to CSS3.

Community
  • 1
  • 1
  • 1
    Looks like this stack overflow thread has the answer you're looking for: http://stackoverflow.com/questions/20751937/css-background-colour-transition-slide-up as long as you can use background gradients – scottohara Apr 28 '17 at 03:12
  • This here folks is a reliable source. Thanks –  Apr 28 '17 at 03:39
  • @scottohara If I want to hover the background color, left-right and right-left sir. How do you achieve that? the background position only hovers top or bottom –  Apr 28 '17 at 03:53
  • I'll expand this out into a new answer, cause I'm changing around some stuff – scottohara Apr 28 '17 at 04:03
  • Aren't you aware of that using pseudo element and `transform` is much better as you get GPU accelerated CSS transitions? ... Also gradient does not work in IE9, if you intend to support it – Asons Apr 28 '17 at 06:06

1 Answers1

5

So this expands on the original answer I linked to by providing you with different combinations for transitions (trbl). Run the code snippet to see the examples in action.

button {
  font-size: 2em;
  color: #333;
  padding: 8px;
  border: 2px solid #333;
  margin-bottom: 12px;
}

.ex-tb {
  
  background-size: 100% 200%; 
  background-image: linear-gradient(to bottom, #fff 50%, #333 50%);
  transition: 
    background-position .2s ease-in-out, 
    color .2s ease-in-out;
}

.ex-tb:hover,
.ex-tb:focus {
  background-position: 0 100%;
  color: #fff;
}

.ex-tb.ex-t {
  background-image: linear-gradient(to top, #fff 50%, #a60000 50%);
  color: #fff;
}

.ex-tb.ex-t:hover,
.ex-tb.ex-t:focus {
  color: #333;
}


.ex-lr {
  background-size: 200% 100%; 
  background-position: -100% 0;
  background-image: linear-gradient(to left, #fff 50%, #333 50%);
  transition: 
    background-position .2s ease-in-out, 
    color .2s ease-in-out;
}

.ex-lr:hover,
.ex-lr:focus {
  background-position: 0 0;
  color: #fff;
}

.ex-lr.ex-r {
  background-image: linear-gradient(to left, #fff 50%, #333 50%);
  background-position: 100% 0;
}

.ex-lr.ex-r:hover,
.ex-lr.ex-r:focus {
  background-position: 0% 0;
  color: #fff;
}
<button type="button" class="ex-tb">
  Example!
</button>

<button type="button" class="ex-tb ex-t">
  Example 2!
</button>

<button type="button" class="ex-lr">
  Example 3
</button>

<button type="button" class="ex-lr ex-r">
  Example 4
</button>

Just in case anyone misses it from the comment I posted, here is the original stack overflow thread/answer that I expanded on for this answer: CSS background colour transition slide up

Community
  • 1
  • 1
scottohara
  • 727
  • 4
  • 11
  • is the way of using `background-position` better than using pseudo-elements (`:before`, `:after`) in terms of background slide animation? –  Apr 28 '17 at 04:49
  • 1
    @jst.sixteen No, pseudo element is better as one can use `transform` and wit that get GPU accelerated CSS transitions – Asons Apr 28 '17 at 06:04
  • 1
    @LGSon definitely has a point here about how using ```:before``` ```:after``` and ```transform``` should mitigate any performance issues. The nice thing about gradients over pseudo elements though is that you don't have to play around with z-indexing of the psuedo elements to force them behind child nodes of the button (text or otherwise). and with multiple backgrounds in CSS, you could do quite a bit with these animations. Still that all said, gradients are definitely more syntax to work with and not useful if you need to do this for legacy browsers. So use what will work best for you. – scottohara Apr 28 '17 at 11:18
  • @LGSon but how about the `z-index` of text over the pseudo-element? –  Apr 28 '17 at 12:37
  • @jst.sixteen Not sure what you mean by that. Could you explain it some more, maybe with a sample? – Asons Apr 28 '17 at 12:41
  • @jst.sixteen it's what I referenced in my comment: https://codepen.io/scottohara/pen/gWmxzK using pseudo elements, you need to have a child element of the button that has a higher z-index of the pseudo element, otherwise the pseudo element will cover up the text of the button content. again, both valid approaches, but it requires a different setup with pseudo elements. – scottohara Apr 28 '17 at 13:12
  • if you use pseudo-element as background, its `z-index` should be lower than the text's to assume that it's background. the problem is, pseudo-elements like `:before` and `:after` are block elements, if I'm not mistaken –  Apr 28 '17 at 15:10
  • @jst.sixteen did you check the codepen i linked to? it specifically shows what the issue is with using pseudo elements and the additional markup/css updates one must make to solve the z-index issue. – scottohara Apr 28 '17 at 17:17
  • @jst.sixteen Pseudo element is inline by default, not block. Study these 2 samples and see how they solve the _z-index_ problem in two ways, where the second doesn't even need `z-index`: https://jsfiddle.net/LGSon/zqyzrfdy/1/ – Asons Apr 28 '17 at 23:01
  • @scottohara Checked it out. Thanks for the idea –  Apr 29 '17 at 03:05
  • @scottohara Thanks a lot :) –  Apr 29 '17 at 03:10
  • @LGSon Thanks a lot :) –  Apr 29 '17 at 03:10
  • @scottohara In the Codepen, in my second sample, you removed the inner `span` which of course is needed for the same reason it is needed in your second sample – Asons Apr 29 '17 at 07:19
  • @LGSon you're right, apologies. I've edited the codepen to re-add the span and have deleted my previous message as a result since I couldn't edit it to remove the incorrect information. here's the link again: https://codepen.io/scottohara/pen/gWmxzK with the corrected final example. – scottohara Apr 29 '17 at 10:36