從文本到文本框的CSS按鈕動畫

Question

所以我看過這個設計的菜單按鈕，我真的很喜歡這個WordPress站點 - http://www.sensoryguru.com/。當鼠標懸停在菜單上時，一個框會在文本背後生成動畫，但我無法弄清楚它是如何完成的，或者在網站CSS中的任何地方找到它。關於我需要使用什麼CSS的任何想法？任何幫助將不勝感激，如果有人可以幫助我自己實現這一點，並幫助我與我需要的CSS代碼。

感謝，

哈維

Answer 1

這是一個非常簡單的概念。相對定位鏈接，在鏈接中絕對定位僞元素，並使用transition和scaleX()來從中心縮放寬度。

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>