}
.blue:hover {
background-color: #007D9A;
}
.green {
background-color: #91BD09;
}
.green:hover {
background-color: #749A02;
}
.red{
background-color:#E33100;
}
.red:hover {
background-color:#872300;
}
.magenta{
background-color:#A9014B;
}
.magenta:hover {
background-color:#630030;
}
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”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>使用比较纯的CSS创建很Web2.0的按钮</title>
<style type=”text/css”>
.white-area,.dark-area {
padding: 10px;
margin: 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.white-area {
background-color: #ffffff;
}
.dark-area {
background-color: #333333;
}
.columns {
float: left;
margin-left: 10px;
}
.clear {
clear: both;
}
</style>
<link rel=”stylesheet” href=”css3buttons.css” charset=”utf-8″ />
</head>
<body>
<div class=”white-area”>
<a href=”javascript:void(0);” class=”orange”>Web 2.0</a>
<a href=”javascript:void(0);” class=”magenta”>Web 2.0</a>
<a href=”javascript:void(0);” class=”red”>Web 2.0</a>
<a href=”javascript:void(0);” class=”blue”>Web 2.0</a>
<a href=”javascript:void(0);” class=”green”>Web 2.0</a>
</div>
<div class=”dark-area”>
<a href=”javascript:void(0);” class=”orange”>Web 2.0</a>
<a href=”javascript:void(0);” class=”magenta”>Web 2.0</a>
<a href=”javascript:void(0);” class=”red”>Web 2.0</a>
<a href=”javascript:void(0);” class=”blue”>Web 2.0</a>
<a href=”javascript:void(0);” class=”green”>Web 2.0</a>
</div>
</body>
</html>
要看更丰富的效果，可以下源码，点击下载呀！
四、结语
嗯，感谢CCTV、感谢KTV，感谢。。。唉呀，谁扔的臭鸡蛋！！！
说正经的，本人不是专业美工，更谈不上UI设计师。我只是一位码农，不管是写代码的的农民也好，还是天天除了写代码就玩农场的程序员也好，我就是这样的。之所以写这篇东西，也是因为看到了这个地方http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba，感觉很好玩，就连翻译带自己的理解加上周未休息的时间（农场里面菜还没熟，等得寂寞了），写下这个东西了。
