色彩，摄影和精细动画的大量运用，所以这个教程诞生了。

这个页面查看按钮悬停动画工作的方式，滑动文本显示另一个文本(在Wacom网站的情况下)的方法，

演示

代码

首先将HTML用于按钮。

<div class="blue-btn">
 <a class="first-link" href="">
 First Text
 </a>
 <a href="">
 Second Text
 </a>
</div>

就这么多，别的都是CSS ，
我会在这里放出所有最终的代码，并且解释某些。

a{
 color: white;
 text-decoration:none;
 text-align: center;
 display:block; /* important */
}

.blue-btn, .first-link{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s; 
}

.blue-btn{
 height: 64px;
 font: normal normal 700 1em/4em Arial,sans-serif;
 overflow: hidden;
 width: 200px;
 background-color: #3b5998;
}

.blue-btn:hover{
 background-color: #003D99;
}

.blue-btn a:hover{
 text-decoration: none;
}

.first-link{
 margin-top: 0em; 
}

.blue-btn:hover .first-link{
 margin-top: -4em;
}

CSS解释

a{
 color: white;
 text-decoration:none;
 text-align: center;
 display:block; /* important */
} 

**显示块**这里非常重要，因为我在评论中说垂直定位按钮，一个在另一个之上。

.blue-btn{
 height: 64px;
 width: 200px;
 font: normal normal 700 1em/4em Arial,sans-serif;
 overflow: hidden;
 background-color: #3b5998;
}

必须指定**高度和宽度 overflow必须是**隐藏**，因此你无法看到'第二文本'按钮(查看html )，字体(4em )的线高度在按钮中垂直居中，但是，这可能会根据高度而改变。

.blue-btn, .first-link{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s; 
}

CSS3转换(请注意没有-o-前缀，因为Opera现在支持webkit)，没有这个按钮，按钮就会弹出，而且不是幻灯片，我相信你能在js中做到这一点，但是，嗯。

.blue-btn:hover{
 background-color: #003D99;
}

悬停时更改背景颜色是可选的，但是，会给按钮添加一个非常酷的效果，就像向上滑动的新文本是完全不同的按钮一样。

.blue-btn:hover .first-link{
 margin-top: -4em;
}

这段代码是我们把'first-link'类给第一个链接的惟一原因，

你可以看一下下面（和上面）的最终演示。

演示