CSS3按钮动画
来源:互联网 发布:金山软件安全卫士 编辑:程序博客网 时间:2024/06/11 07:28
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码随意改变自己喜欢的颜色样式。
在线演示源码下载
让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例,其他按钮的代码大家可以下载源代码来研究,并不是很难。
HTML代码:
<
div
class="button01">
<
a
href="#">Download</
a
>
<
p
class="top">click to begin</
p
>
<
p
class="bottom">1.2MB .zip</
p
>
</
div
>
CSS代码:
.button
01
{
width
:
200px
;
margin
:
50px
auto
20px
auto
;
}
.button
01
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
bottom
, 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 */
}
.button
01
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.5
s ease;
-moz-transition: margin
0.5
s ease;
-o-transition: margin
0.5
s ease;
-ms-transition: margin
0.5
s ease;
transition: margin
0.5
s ease;
}
/*HOVER*/
.button
01:
hover .
bottom
{
margin
:
-10px
0
0
10px
;
}
.button
01:
hover .
top
{
margin
:
-80px
0
0
10px
;
line-height
:
35px
;
}
/*ACTIVE*/
.button
01
a:active {
background
:
#00b7ea
;
/* Old browsers */
background
: -moz-linear-gradient(
top
,
#00b7ea
36%
,
#009ec3
100%
);
/* FF3.6+ */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, 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 */
}
.button
01:
active .
bottom
{
margin
:
-20px
0
0
10px
;
}
.button
01:
active .
top
{
margin
:
-70px
0
0
10px
;
}
在线演示源码下载
阅读全文
0 0
- CSS3按钮动画
- css3实现带有简单动画按钮导航
- 纯css3开关按钮动画特效插件
- CSS3鼠标滑动动画按钮特效
- css3实现动画对号选择按钮
- 【转载】 25 个实用的 CSS3 动画按钮/菜单教程
- 8款超酷而实用的CSS3按钮动画
- 纯CSS3动画按钮效果 5种漂亮样式
- 【技术控】 如何做按钮小动画?HTML+CSS3
- 魔幻般冒泡背景的CSS3按钮动画
- CSS3鼠标滑过彩色按钮动画特效
- 纯CSS3鼠标滑过按钮动画过滤特效
- 8套迷人精致的CSS3 3D按钮动画
- 8款超酷而实用的CSS3按钮动画
- css3动画
- css3动画
- css3动画
- css3动画
- CF500B New Year Permutation (贪心+并查集)
- Android 以apk包方式共享资源(动态换肤)的实现方式
- python -- 网络和数据库
- 多因子模型之因子(信号)测试平台----alphalens(四)
- python -- 面向对象编程
- CSS3按钮动画
- 《Angular2入门系列基础》——ActivatedRoute路由
- leetcode 25. Reverse Nodes in k-Group
- 编程练习
- CSS的单位及css3的calc()及line-height百分比
- 机器学习算法小整理之K-means
- Codeforces Round #419 (Div. 2)A&B&技巧
- Linux进入单用户singleuser 模式
- linux杂记