扣丁学堂浅谈HTML5视频教程之纯CSS3动画按钮效果 5种漂亮样式

2017-12-12 14:58:06 583浏览

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

HTML代码：

<divclass="button01">

<ahref="#">Download</a>

<pclass="top">clicktobegin</p>

<pclass="bottom">1.2MB.zip</p>

</div>

CSS代码：

.button01{

width:200px;

margin:50pxauto20pxauto;

}

.button01a{

display:block;

height:50px;

width:200px;

/*TYPE*/

color:white;

font:17px/50pxHelvetica,Verdana,sans-serif;

text-decoration:none;

text-align:center;

text-transform:uppercase;

/*GRADIENT*/

background:#00b7ea;/*Oldbrowsers*/

background:-moz-linear-gradient(top,#00b7ea0%,#009ec3100%);/*FF3.6+*/

background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#00b7ea),color-stop(100%,#009ec3));/*Chrome,Safari4+*/

background:-webkit-linear-gradient(top,#00b7ea0%,#009ec3100%);/*Chrome10+,Safari5.1+*/

background:-o-linear-gradient(top,#00b7ea0%,#009ec3100%);/*Opera11.10+*/

background:-ms-linear-gradient(top,#00b7ea0%,#009ec3100%);/*IE10+*/

background:linear-gradient(top,#00b7ea0%,#009ec3100%);/*W3C*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea',endColorstr='#009ec3',GradientType=0);/*IE6-9*/

}

.button01a,p{

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

-webkit-box-shadow:2px2px8pxrgba(0,0,0,0.2);

-moz-box-shadow:2px2px8pxrgba(0,0,0,0.2);

box-shadow:2px2px8pxrgba(0,0,0,0.2);

}

p{

background:#222;

display:block;

height:40px;

width:180px;

margin:-50px0010px;

/*TYPE*/

text-align:center;

font:12px/45pxHelvetica,Verdana,sans-serif;

color:#fff;

/*POSITION*/

position:absolute;

z-index:-1;

/*TRANSITION*/

-webkit-transition:margin0.5sease;

-moz-transition:margin0.5sease;

-o-transition:margin0.5sease;

-ms-transition:margin0.5sease;

transition:margin0.5sease;

}

/*HOVER*/

.button01:hover.bottom{

margin:-10px0010px;

}

.button01:hover.top{

margin:-80px0010px;

line-height:35px;

}

/*ACTIVE*/

.button01a:active{

background:#00b7ea;/*Oldbrowsers*/

background:-moz-linear-gradient(top,#00b7ea36%,#009ec3100%);/*FF3.6+*/

background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(36%,#00b7ea),color-stop(100%,#009ec3));/*Chrome,Safari4+*/

background:-webkit-linear-gradient(top,#00b7ea36%,#009ec3100%);/*Chrome10+,Safari5.1+*/

background:-o-linear-gradient(top,#00b7ea36%,#009ec3100%);/*Opera11.10+*/

background:-ms-linear-gradient(top,#00b7ea36%,#009ec3100%);/*IE10+*/

background:linear-gradient(top,#00b7ea36%,#009ec3100%);/*W3C*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea',endColorstr='#009ec3',GradientType=0);/*IE6-9*/

}

.button01:active.bottom{

margin:-20px0010px;

}

.button01:active.top{

margin:-70px0010px;

}

        以上就是关于扣丁学堂浅谈HTML5视频教程之纯CSS3动画按钮效果5种漂亮样式的详细介绍，最后如果你是零基础想要学习HTML5开发技术想要成为一名HTML5开发工程师的小伙伴通过自己的努力和老师的教导，在扣丁学堂参加完HTML5培训后想要找到一份不错的工作不是什么难事。扣丁学堂还有大量的HTML5视频教程供学员观看学习，喜欢HTML5开发想要进入HTML5开发领域的小伙伴不要再犹豫了，参加扣丁学堂HTML5培训让你的2018与众不同吧!扣丁学堂H5技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>