CSS Button Animation von Text zu Box

Question

Also ich habe dieses Design für einen Menü-Button ich mag wirklich von dieser WordPress-Website - http://www.sensoryguru.com/. Wenn man über das Menü schwebt, wird hinter dem Text eine Box animiert, aber ich kann nicht herausfinden, wie es gemacht wurde, oder irgendwo im CSS der Website finden. Irgendwelche Ideen, welche CSS ich verwenden muss? Jede Hilfe wird geschätzt, wenn jemand mir helfen kann, dies selbst zu implementieren und mir mit dem CSS-Code zu helfen, den ich brauche.

Danke,

Harvey

Answer 1

Es ist ein ziemlich einfaches Konzept. Positionieren Sie die Verbindung relativ, positionieren Sie ein Pseudoelement in der Verbindung und verwenden Sie transition mit scaleX(), um die Breite von der Mitte zu skalieren.

nav a { 
 
    display: inline-block; 
 
    padding: .25em 2em; 
 
    margin: 1em; 
 
    position: relative; 
 
    border-radius: .5em; 
 
    overflow: hidden; 
 
} 
 
nav a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    background: pink; 
 
    transform: scaleX(0); 
 
    transition: transform .25s; 
 
} 
 
nav a:hover:before, nav .active:before { 
 
    transform: scaleX(1); 
 
}

<nav> 
 
    <a href="#" class="active">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
</nav>