运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<title>CSS3动画按钮</title>
2
<style type="text/css">
3
.appstorebutton {height: 80px;width: 80px;margin: 30px;position: relative;overflow: hidden;float: left;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 1s ease;transition: width 1s ease;
4
}
5
.appstorebutton:hover {width: 260px;}
6
.appstorebutton a {color: white;text-decoration: none;}
7
.appstorebutton p {width: 200px;font: 30px/1 Helvetica, Arial, sens-serif;text-align: center;color: white;margin: 17px 0px 10px 60px;   }
8
.appstorebutton p small {font-size: 15px;}
9
.iphone {background: #105CB6;}
10
.iphone p:before {content: "O";position: absolute;font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;top: 8px;left: 13px;}
11
</style>
12
<div class="appstorebutton iphone">
13
<p><a href="#"><small>可选一个资源供下载</small><br />Download</a></p>
14
</div>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
CSS3按钮 动画下载按钮样式
分类
网站常用
描述
一个基于CSS3技术而实现的下载按钮样式,有动画效果,传统CSS是不能实现的,从风格上看,貌似模仿的苹果网站的下载按钮样式,鼠标悬停效果是,当鼠标放在按钮上的时候,按钮会向右展开,显示出按钮上的文字,就像是Flash按钮一样。学习CS...
收藏