@zuolizhu
Posted
Hey Lars,
Nice work on this solution! The animation on the button hover is very cool 👏. To answer your questions:
-
I haven't see the shaky when I turn off backface-visibility: hidden; It might be caused by the cubic-bezier. You can watch how your cubic-bezier looks like in here👉 https://cubic-bezier.com/
-
There is nothing wrong to use position: absolute; once you remember to set the parent (
card__pricing) to position relative. However, I would settop: 50%; transform: translateY(-50%);to the text 'per month' to make it centered vertically.
To use the flexbox, just set card__pricing display to flexbox, and depends on your flavor, you can set card__pricing align items to center, or set card__paragraph align-self to center.
Here is my favorite flexbox cheat sheet, https://yoksel.github.io/flex-cheatsheet/ hope these can help.
Happy coding!
@languagelars
Posted
@zuolizhu Hello zuolizhu. Thank you very much for your detailed comment, highly appreciate it! After restarting my browser the shakiness was gone, idk why it happened. Yes, it could be because of the cubic-bezier. I've added top: 50%; and left: 50%; and transform: translate(-50%, -50%) now and indeed it is perfectly centered now. Flexbox I tried as well and might even be a better solution, true.
