/* Global attribute to easily control easing and timing of all targetted elements */ [data-button-anim-target] { transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1); } /* Fake a duplicate text element using text shadow without blur */ /* We save the distance in a variable for easy use in the CSS animation */ .btn-icon-content__text { --text-duplicate-distance: 1.5em; text-shadow: 0px var(--text-duplicate-distance) currentColor; } /* Only apply hover animations if they are actually not supported */ @media (hover:hover) and (pointer:fine) { .btn-icon-link:hover .btn-icon-content__text { transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); } .btn-icon-link:hover .btn-icon-icon__bg { transform: rotate(90deg); } .btn-icon-link:hover .btn-icon-icon__arrow { transform: translate(200%, 0px); } .btn-icon-link:hover .btn-icon-content__bg { transform: translate(0px, 0%) rotate(0deg); } }