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

-2

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

感謝，

哈維

來源

2017-06-15 Harvey

這是一個非常簡單的概念。相對定位鏈接，在鏈接中絕對定位僞元素，並使用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>

來源

2017-06-15 23:45:13

謝謝你，我會給它一個去，看看我得到 – Harvey

您好，我剛纔測試了這一點，我怎麼敢我能申請這個只對導航欄而不是整個頁面像我在身體和滾動橫幅中的其他按鈕？還有什麼部分的CSS控制填充/大小，如果背景懸停？ – Harvey

@Harvey用一個特定的選擇器來限制css，比如'nav a'而不是'a'。用那個更新了我的答案。爲了影響背景的填充，只需改變「nav a」的填充。背景將填充整個'a'元素。 –

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

回答

相關問題