-
在你分享了很多实用的按钮纯CSS3实现。今天，给你一个CSS3动画按钮，结果如下：
实现的代码。
HTML代码：
xml代码将内容复制到剪贴板。
分享推特
分享脸谱网
销Pinterest
分享Tumblr
在眉目传情+分享
CSS3代码：
CSS代码将内容复制到剪贴板。
体
{
背景：WebKit的线性梯度（0度，# ff8008 10%，# ffc837 90%）；
背景：线性梯度（90度，# ff8008 10%，# ffc837 90%）；
填料：2em；
文本对齐：中心；
}
*
{
-moz盒尺寸：边界盒；
盒尺寸：边框框；
}
分享按钮。
{
位置：绝对；
宽度：300px；
身高：212px；
左：135px填充；
顶部：50%；
左：50%；
margin-left: - 150px；
边距：- 106px；
}
share-buttons.share-button。
{
浮点数：左；
边距：15px；
}
共享按钮。共享按钮：第一个孩子
{
边距顶部：0；
}
共享按钮。共享按钮：后
{
清楚：两者；
显示：表；
}
分享按钮。
{
显示块；
职位：相对；
身高：30px；
}
共享按钮：悬停
{
光标：指针；
}
分享按钮：hover.share-button-primary。
{
盒子的影子：1px 000 RGBA（0, 0, 0，0.1）；
}
分享按钮：hover.share-button-secondary-content。
{
WebKit的变换：（0, 0, 0）translate3d；
translate3d变换：（0, 0, 0）；
}
共享按钮主
{
位置：绝对；
背景：# FFF；
宽度：30px；
身高：30px；
边界半径：15px；
左：0；
顶部：50%；
边距：- 15px；
}
共享按钮图标
{
显示块；
颜色：# 242424；
位置：绝对；
宽度：30px；
行高：30px；
字体大小：16px；
边距：1px；
}
共享按钮
{
溢出：隐藏；
左：15px保证金；
身高：30px；
}
共享按钮的次要内容
{
字体族：无衬线字体；
字体大小：。75em；
背景：# FFF；
显示块；
身高：30px；
文本对齐：左对齐；
左：24px填充；
填充右：18px；
行高：30px；
颜色：# 242424；
边界半径：0 15px 15px 0；
WebKit的变换：translate3d（100%，0, 0）；
变换：translate3d（100%，0, 0）；
WebKit的过渡：WebKit的变换175ms缓解；
过渡：变换175ms缓解；
}
U3000 U3000
相关建议：
在动画按钮纯CSS3实现的实例教程
一个颜色渐变按钮代码教程纯CSS3实现
鼠标的纯CSS3实现通过一个按钮特效教程
简单的鼠标悬停实现CSS3按钮
对一个纯CSS3光分享按钮的实现教程
五美丽的纯CSS3动画按钮实例教程