按钮

最新推荐文章于 2022-11-11 21:29:09 发布

q709387990

最新推荐文章于 2022-11-11 21:29:09 发布

阅读量179

点赞数

文章标签： xhtml stylesheet 浏览器 button css html

本文链接：https://blog.csdn.net/q709387990/article/details/6108721

版权

//my.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />

<meta content="all" name="robots" />
<meta name="author" content="a Li" />
<meta name="Copyright" content="自由版权,任意转载" />
<meta name="description" content="介绍 CSS 语法" />
<meta content="css,xhtml+css,CSS+DIV" name="keywords" />

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<title>CSS 3 阴影、圆角</title>

<link rel="stylesheet" href="button1.css"
type="text/css" media="all" />

</head>

<body>

   <div id="light">
  <ul>
   <li><a class="super button pink" href="#" >粉红色按钮</a></li>
  </ul>
   </div>

</body>
</html>

//button1.css

#light{

border:1px solid #dedede;
padding:10px;
margin-top:20px;
}

/* 设置 li */
li{
/* 去掉圆点 */
list-style:none;
/* 内部填充，上下间距 */
padding-top:10px;
padding-bottom:10px;
}

/* 设置按钮样式 */
.button{
background:#222 url(../images/overlay.png) repeat-x;
display:inline-block;
padding:5px 10px 6px;
/* 文字颜色 */
color:#fff;
/* 取消下划线 */
text-decoration:none;
/* 设置圆角左上、右上、左下、右下 */
/* 火狐公司制定的圆角属性，设置为半径为 6px 的圆 */
-moz-border-radius:6px;
/* 苹果浏览器公司的圆角标签 */
-webkit-border-radius:6px;

/* 设置阴影，偏移 */
-moz-box-shadow:0 10px 30px rgba(0,0,0,0.6);
-webkit-box-shadow:0 10px 30px rgba(0,0,0,0.6);

/* 定位 */
position:relative;
/* 光标样式 */
cursor:pointer;
}

/* 鼠标覆盖，背景，文字变色 */

.button:active{
top:1px;
}

/* 鼠标覆盖变色 */
.pink:hover{
background-color:#228B22;
}
/* 按钮变成粉红色 */
.pink:visited{
background-color:#e22092;
}
/* 把按钮改成大按钮 */
.button:visited{
font-size:34px;
padding:8px 14px 9px;
}
.button:hover{
background-color:#CD5C5C;
color:#00CED1;
}