This article is mainly to introduce an animation button, can be completed by only CSS3, the first row of the button when the background color animation switch mouse after the icon from the right fly in the second row of the button when the mouse over the icon on the right side of the frame animation switch, fly in, the effect is very good, a friend in need you can refer to





今天，让我们分享一个纯CSS3动画按钮。按钮第一排，鼠标经过背景色动画时，开关的图标从右边。当鼠标经过时，第二行按钮会切换边框动画，图标的右侧会飞入其中。效果非常好。让我们一起来看看效果图。


实现的代码。

HTML代码：

xml代码将内容复制到剪贴板。



成为会员具有< a href =#
类=按钮>支持我们具有；
放慢RARR；标志
上具有；



成为会员具有< a href =#
类=按钮>支持我们具有；
放慢RARR；标志
上具有；





CSS3代码：

CSS代码将内容复制到剪贴板。


体
{
}

H1
{
字体家庭：啊，
颜色：# f9f9f9；
字母间距：1px；
}

身体的div
{
填料：60px 0；
文本对齐：中心；
身高：80px；
边距顶部：0；
}

黑色的。
{
背景：# 262d28；
}

白色的。
{
背景：# f9f9f9；
}

一
{
显示：内联块；
保证金：10px；
}

。按钮
{
职位：相对；
宽度：160px；
填料：1.2rem 3rem；
边境：1px solid # 0aa944；
字体大小：15px；
文字装饰：无；
颜色：# f9f9f9；
字体家庭：平板厚度
文本转换：大写；
字体重量：300；
字母间距：1.5px；
WebKit的过渡：all.2s自在；
-moz过渡：all.2s自在；
MS过渡：all.2s自在；
- O转换：all.2s自在；
过渡：all.2s自在；
}

white.btn。
{
颜色：# 262d28；
边境：2px固体# 0aa944；
}

BTN跨度。
{
职位：相对；
上图：2px；
左：0；
WebKit的过渡：all.3s自在；
-moz过渡：all.3s自在；
MS过渡：all.3s自在；
- O转换：all.3s自在；
过渡：all.3s自在；
}

-我。
{
不透明性：0；
位置：绝对；
边距：- 21px；
上图：2.5rem；
左：120%；
WebKit的过渡：all.3s自在；
-moz过渡：all.3s自在；
MS过渡：all.3s自在；
- O转换：all.3s自在；
过渡：all.3s自在；
}

注：悬停。
{
背景：RGBA（255255255。9）；
边境：1px solid RGBA（0,0,0,1）；
}

白：悬停按钮
{
背景：RGBA（0,0,0，。02）；
边境：2px固体RGBA（0,0,0,1）；
}

注：悬跨。
{
颜色：# 333；
左：- 20px；
}

A.btn：萦绕我
{
不透明性：1；
左：80%；
颜色：# 333；
WebKit的变换：规模（1.2）；
}

A.btn：hover.up
{
WebKit的变换：旋转（270deg）；
}

A.btn：hover.down
{
WebKit的变换：旋转（90度）；
}




以上就是今天的代码共享纯CSS3动画按钮。谢谢你的阅读。我们希望能帮助你。Please pay attention to it. 我们将努力分享更多的优秀文章。