CSS3悬停文字幻灯片效果

我见过很多按钮有悬停文字有一个幻灯片的效果，这个效果很棒有很好的交互效果。因为我分享一下如何制作这样一个按钮。

html代码

下面是一个按钮的所有html代码

css代码

下面的几乎是所有的css代码

css解释

注释中有说明，它非常重要，因为我们要垂直放置文字

和必须指定一个值，必须设置为不然你会看到第二个按钮。字体的行高（4em）将文本垂直放置在按钮中，但这可能会根据高度而变化。

CSS3 transitions(由于opera现在支持webkit，因此请注意不使用-o-前缀)，没有这个按钮就会弹，出而不是幻灯片方式。相信你可以在js中做到这一点，但是，呃。

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

我们给第一个链接提供了类用处就在这里，当鼠标悬停到上时，此代码会使第一个链接向上移动。

重要的代码我已经做了详细说明，希望你也能制作一个炫酷的悬停幻灯片按钮

DEMO链接 https://codepen.io/tudou/full/eVyqGV/