文档章节

使用CSS3伪类选择器美化按钮

阿振
 阿振
发布于 2016/05/24 14:44
字数 332
阅读 84
收藏 2

直接上源码:

<!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>

© 著作权归作者所有

阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
私信 提问
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
108
0
巧用伪元素和伪类让我们的html结构更清晰合理

css3为了区分伪类和伪元素,伪元素采用双冒号写法。 伪元素: [ 伪元素用于向某些选择器设置特殊效果,简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容,...

Neuro_annie
2017/12/06
0
0
好程序员web前端分享Css3的概念和优势

好程序员web前端分享Css3的概念和优势,CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新...

好程序员IT
05/06
6
0
10 个实验性的 JS/CSS3 编程技术

本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法。需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用...

小编辑
2011/12/09
2.9K
6
神通广大的CSS3选择器

作者:大额_skylar http://www.cnblogs.com/skylar/p/css3-selector.html 每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的...

数通畅联
2016/02/23
28
0

没有更多内容

加载失败,请刷新页面

加载更多

java快递电子面单打印接口对接demo

之前的后天管理系统的电子面单打印使用的是灵通打单。 使用相对比较麻烦,需要到处Excel之后再导入,麻烦。 快递鸟有电子面单api,后台系统直接对接很是方便,不过也遇到了好些问题。 不难是...

程序的小猿
21分钟前
3
0
fasjtjson文档

https://github.com/alibaba/fastjson/wiki/JSONField

jirak
21分钟前
3
0
Mybatis中插入多条记录

Oracle数据库 实现方法 <insert id="saveWithdrawLog"> INSERT ALL INTO OSM_TRADE_DETAIL(SID,MBR_ID,USR_ID,TRADE_MONEY,TRADE_TYPE,TRADE_TIME,TRADE_WAY,PAY_ID) VALUES(#{si......

豫华商
21分钟前
3
0
Flink on YARN(下):常见问题与排查思路

作者:杨弢(搏远) Flink 支持 Standalone 独立部署和 YARN、Kubernetes、Mesos 等集群部署模式,其中 YARN 集群部署模式在国内的应用越来越广泛。Flink 社区将推出 Flink on YARN 应用解读...

开源中国小二
23分钟前
3
0
技术沙龙|京东云端到端多媒体关键技术揭秘

编者按:从带来更高编码效率、更好的用户体验的京享高清,到直播架构与网络演进优化,从而为用户带来更流畅的观看体验,以及运维系统的异常自动修复和高弹性的多媒体存储架构,一层一层展示出...

京东云技术新知
24分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部