CSS3制作绚丽圆形动态按钮

资源来源网络，如需授权，请更换源码，模块仅供学习，如需商用请购买正版授权，本栏目不提供技术服务，积分不够请签到！如何签到？系统升级暂停签到，恢复关注公告！
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试！广告

1.制作绚丽动态按钮HTML代码：

<div class=”css3Menus”>
<ul>
<li id=”btn1″><a href=””>CSS3</a></li>
<li id=”btn2″><a href=””>HTML5</a></li>
<li id=”btn3″><a href=””>jQuery</a></li>
</ul>
</div>

2.设置按钮外框div容器背景、边框CSS样式：

.css3Menus {
background: url(keimg.gif) repeat;
width: 506px;
height: 260px;
padding: 20px;
border: 5px solid #88DBF6;
}

3.设置原型按钮CSS样式，border-radius为标签设置圆角样式,box-shadow为标签设置投影样式：

ul {
list-style: none;
}
li {
float: left;
font: 14px/10px Arial, Verdana, sans-serif;
color: #FFF;
background-color: #CCCC00;
width: 80px;
height: 80px;
padding: 20px;
margin: 0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
box-shadow: 3px 3px 3px #666;
}

4.对每一个按钮背景具体设置CSS样式：

li#btn1 {
background-color: #FF9933;
}
li#btn2 {
background-color: #FF7799;
margin-top: 100px;
}
li#btn3 {
background-color: #33FF66;
margin-top: 50px;
}

5.设置按钮超链接背景、字体对其CSS样式

li a {
color: #FFF;
text-decoration: none;
display: block;
width: 80px;
height: 45px;
text-align: center;
padding: 35px 0 0 0;
margin: 0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
font-size: 14px;
font-weight: bold;
-o-text-shadow: 1px 1px 0px #333333;
-ms-text-shadow: 1px 1px 0px #333333;
-webkit-text-shadow: 1px 1px 0px #333333;
text-shadow: 1px 1px 0px #333333
}
li#btn1 a {
background-color: #FF6600;
-o-box-shadow: 1px 10px 5px #B04600 inset;
-ms-box-shadow: 1px 10px 5px #B04600 inset;
-webkit-box-shadow: 1px 10px 5px #B04600 inset;
box-shadow: 1px 10px 5px #B04600 inset
}
li#btn2 a {
background-color: #FF3366;
-o-box-shadow: 1px 10px 5px #AA002B inset;
-ms-box-shadow: 1px 10px 5px #AA002B inset;
-webkit-box-shadow: 1px 10px 5px #AA002B inset;
box-shadow: 1px 10px 5px #AA002B inset
}
li#btn3 a {
background-color: #009900;
-o-box-shadow: 1px 10px 5px #005B00 inset;
-ms-box-shadow: 1px 10px 5px #005B00 inset;
-webkit-box-shadow: 1px 10px 5px #005B00 inset;
box-shadow: 1px 10px 5px #005B00 inset
}

5.设置鼠标划过、点击时CSS样式：

li a:hover, li a:focus, li a:active { width: 120px; height: 65px; padding: 55px 0 0 0; margin: -20px 0 0 -20px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; } li a:hover, li a:focus, li a:active { -webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; }

本CSS3教程可以在不用到javaScript的情况下制作出绚丽的圆形动画按钮；该教程所使用CSS3新属性：border-radius，text-shadow，box-shadow和animation属性。

实例效果图，点击图片查看演示案例或下载此教程：

NOTICE:【咨询风格酷】客服QQ：1131734965
NOTICE:【咨询风格酷】客服微信：wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群：288678775
☉免责声明：本站所有模板均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。
☉如果源码网盘地址失效！或有其他问题，请点我报错,谢谢合作！
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服！
☉如有其他问题，请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源，都不包含技术服务，请大家谅解！
☉源码、模板等资源会随着技术、环境的升级而存在部分问题，还请慎重选择。

分享到：

百度已收录

相关推荐

发表评论 取消回复

风格酷模板网www.xmam.net分享优质网站模板

发表评论取消回复