五款漂亮的纯css3动画按钮的实例教程

swmozowtfl · *发表于* 2015-7-10 22:24:39

今天来分享很不错的css3按钮动画，这款css3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改css代码随意改变自己喜欢的颜色样式。

登录/注册后可看大图

让我们一起来看看实现这5中样式动画按钮的html代码和css代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。
html代码：
xml/html code复制内容到剪贴板
<div class=button01>
<a href=#>download</a>
<p class=top>click to begin</p>
<p class=bottom>1.2mb .zip</p>
</div>
css代码：
css code复制内容到剪贴板
.button01 {
width: 200px;
margin: 50px auto 20px auto;
}

.button01 a {
display: block;
height: 50px;
width: 200px;

/*type*/
color: white;
font: 17px/50px helvetica, verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;

/*gradient*/
background: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* chrome10+,safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* ie10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* w3c */
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */
}

.button01 a, p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;

/*type*/
text-align: center;
font: 12px/45px helvetica, verdana, sans-serif;
color: #fff;

/*position*/
position: absolute;
z-index: -1;

/*transition*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}

/*hover*/
.button01:hover .bottombottom {
margin: -10px 0 0 10px;
}

.button01:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}

/*active*/
.button01 a:active {
background: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* chrome10+,safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* ie10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* w3c */
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */

}

.button01:active .bottombottom {
margin: -20px 0 0 10px;
}

.button01:active .top {
margin: -70px 0 0 10px;
}

更多网页制作信息请查看：网页制作

seazvyt · *发表于* 2015-12-14 18:06:13

你这样的表现，就只配这几个字：窝囊废

bqtklouu · *发表于* 2015-12-14 18:06:31

相比他连说拜拜的想法都没了哈哈

mwxny · *发表于* 2015-12-14 18:06:40

这话从何说起那~~~

seazvyt · *发表于* 2015-12-14 18:07:07

对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。

bqtklouu · *发表于* 2015-12-29 21:55:39

为了不让帖子沉得太快！！！为了人人知道这个~！！我不是原创~！！但是我要把他发扬广大~！！！

gevaemaidovef · *发表于* 2015-12-29 21:55:41

成长可以说已经是很幸福的了。但在另一方面，作者也不是温室里的花*，只能作些鸳鸯蝴蝶的文章。在前面我已经说过了，这篇文章比形散神聚更胜一筹。诸位见过大风沙没有

effoggikeftor · *发表于* 2015-12-29 21:55:53

哦~~~明白了....

五款漂亮的纯css3动画按钮的实例教程

猜你喜欢

回复|共 7 个

回复

浏览过的版块

快捷导航