使用CSS3伪类选择器美化按钮
2016-05-24 00:00
681 查看
直接上源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用CSS3美化按钮</title> <style> body { padding-top: 50px; } .download-info { text-align: center; } /* 默认状态下的按钮效果 */ .btn { background-color: #0074cc; *background-color: #0055cc; /* IE6,7 */ /* CSS3渐变制作背景图片 */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); background-repeat: repeat-x; display: inline-block; *display: inline; /* IE6,7 */ border: 1px solid #ccc; *border: 0; /* IE6,7 */ border-color: #ccc; /* CSS3色彩模块 */ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-radius: 6px; color: #fff; cursor: pointer; font-size: 20px; font-weight: normal; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); line-height: normal; padding: 14px 24px; text-align: center; /* CSS3文字阴影特性 */ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; vertical-align: middle; *zoom: 1; } /* 悬浮状态下按钮效果 */ .btn:hover { background-position: 0 -15px; background-color: #0055cc; *background-color: #004ab3; color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); /* CSS3动画效果 */ -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } /* 点击时按钮效果 */ .btn:active { background-color: #0055cc; *background-color: #004ab3; background-color: #004099 \9; background-image: none; outline: 0; /* CSS3盒子阴影特性 */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.75); } /* 获取焦点按钮效果 */ .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } </style> </head> <body> <div class="download-info"> [View Project On GitHub](#) </div> </body> </html>
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器:Atom
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- oracle em 按钮乱码解决办法及em网页变成英文
- css文本框与按钮美化效果代码
- 用CSS实现的一张图完成的按钮效果
- css样式之区分input是按钮还是文本框的方法第1/4页
- Android实现定制返回按钮动画效果的方法
- jQuery CSS3相结合实现时钟插件
- jQuery移动页面开发中主题按钮的设计示例