如何动画按钮的内容？

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) 
}