I don’t really have a read-only because this is just happening in draft style guide, but does anyone know what’s causing this problem?
Here is the GIF: Imgur: The magic of the Internet
Here is the structure: Imgur: The magic of the Internet
Here is the CSS code:
.btn:hover .btn-icon {
transform: translate(100%, -100%);
}
.btn:hover .btn-bg {
transform: translateY(0%);
}
.btn:hover .btn-text {
color: var(--text--black);
}
.btn-bg,
.btn-icon {
transition: transform 450ms ease;
}
.btn-text {
transition: color 450ms ease;
}
Lastly, .btn is set to overflow-hidden with 5rem border radius and has BG color black. It’s also relative
.btn-bg has 5 rem border, absolute positioning with 100% width and height.
I tried setting btn-bg scale higher and basically everything, but it seems to come from .btn being overflow hidden.
Any ideas?
Hey!
It looks like the issue may stem from the overflow-hidden property on .btn, which can affect how child elements are displayed during transitions. I can help troubleshoot and refine your CSS to ensure smooth transitions and proper display of your button elements.
Thanks!
Hmm okay what do I need to do for you to help me?
Do you need a read-only or?
Really, no one can help me with this? 
