如何動畫按鈕的內容？

Question

轉到谷歌，沒有輸入任何東西，將鼠標懸停在「我很幸運」按鈕上。看看它做了什麼？

我不知道該怎麼做......關於：懸停....但實際內容和動畫本身如何？

Answer 1

這不是按鈕的動畫。

他們有一個隱藏的div，位於按鈕上方。它絕對定位。 它包含很多跨所有消息。

在懸停時，它們使用一個函數來移動該div，並使其可見。 它看起來像按鈕的內容正在移動，但他們不是真的。

<button></button> 
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;> 
    <div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;"> 
    <!-- spans go here --> 
    </div> 
</div> 

查看值-29px？這一切都在改變。

Answer 2

添加一個類，即：專注，爲邊框和大膽的臉，用jQuery撥動它：

$('#button').hover(function() { 
    $(this).addClass('focus'); 
}, function() {  
    $(this).removeClass('focus'); 
}); 

實際的規則，你可以看到谷歌的Chrome瀏覽器使用是：

.gbqfba-hvr:focus,.gbqfbb-hvr:focus{ 
    -webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1); 
    -moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1); 
    box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1) 
} 
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{ 
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1); 
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.1); 
    box-shadow:0 1px 1px rgba(0,0,0,.1) 
}