How to animate a hover pseudoclass :after and :before?

Asked Apr 28 '17 at 17:20

Active Apr 28 '17 at 17:20

Viewed 89 times

Someone knows how to make these hover effects animating the pseudoclasses :after and :before??

https://tympanus.net/Development/CreativeButtons/

thanks, I'm trying to learn, I don't need the sheet to buy or download

I've just analized it and it appears that there is an element:

section p button (the p I discovered is a better way to center, very nice)

a class for the button:

.btn

a normal pseudoclass for the basic hover effects:

.btn:hover

an after and before pseudoclass:

.btn:after

.btn:before

what I don't understand is how to animate .btn:after and .btn:before

here I have a reference sheet that I'm doing for myself where you can see (the css is not dry because it is a reference sheet and in a future I can use it to look to a specific object, class to reuse or modify

https://codepen.io/Heavybrush/pen/bWgXpx

asked Apr 28 '17 at 17:20

Heavybrush

1

Possible duplicate of [How to make a hover effect for pseudo elements?](http://stackoverflow.com/questions/8874326/how-to-make-a-hover-effect-for-pseudo-elements) – Tyler Roper Apr 28 '17 at 17:24
2

like this? https://codepen.io/mcoker/pen/YVZajw – Michael Coker Apr 28 '17 at 17:29
yes, I did, I found the problem, it was the z-index not specified in the other elements, thank you very much anyway :) – Heavybrush Apr 28 '17 at 17:31

How to animate a hover pseudoclass :after and :before?

0 Answers0