【记录】通过CSS控制文字显示出按钮的效果

想要通过css来控制文字，显示出，类似于：

http://support.mozilla.org/zh-CN/kb/Adobe%20Flash%20%E6%8F%92%E4%BB%B6%E5%B7%B2%E5%B4%A9%E6%BA%83?redirectlocale=zh-CN&redirectslug=flash-113

中的按钮的效果：

1.找到几个不错的参考资料：

CSS3制作的漂亮的Button按钮效果

超漂亮的css3制作的按钮

2.自己折腾了半天，最后终于用如下html代码：

<!DOCTYPE html>
<html class="no-js" lang="zh-CN" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML中的按钮，菜单测试</title>

    <style type="text/css">
.button{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}

dl,menu,ol,ul {
	margin: 1em 0
}
dd {
	margin: 0 0 0 40px
}
menu,ol,ul {
	padding: 0 0 0 40px
}
    </style>
    
</head>
<body>
<span class="for" data-for="win">点击 Firefox 窗口顶部的 <span class="button">Firefox</span> 按钮（Windows XP 中是点击 <span class="menu">文件</span> 菜单），然后点击 <span class="menu">退出</span></span>

</body>

生成对应的，有点类似的效果：

Firefox：

IE9：

Chrome：

3.后来又参考：

清新风格按钮纯CSS效果（供源码下载）

而得到更好的效果：

<!DOCTYPE html>
<html class="no-js" lang="zh-CN" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML中的按钮，菜单测试</title>

    <style type="text/css">
.button{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}

dl,menu,ol,ul {
	margin: 1em 0
}
dd {
	margin: 0 0 0 40px
}
menu,ol,ul {
	padding: 0 0 0 40px
}

.btn_solid_gray{
    display:inline-block;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    color:rgba(255,255,255,1);
    padding:0.5em 1em;
    margin:0.5em;


    border-style:solid;
    border-width:1px;
    border-radius:4px;
    box-shadow:0 1px 1px rgba(255,255,255,0.5) inset;

    background:#f2f2f2;
    background:rgba(0,0,0,0.05);
    border-color:#eee;
    border-color:rgba(0,0,0,0.1);
    color:#999;
    color:rgba(0,0,0,0.5);

}

    </style>

</head>
<body>
<span class="for" data-for="win">点击 Firefox 窗口顶部的 <span class="button">Firefox</span> 按钮（Windows XP 中是点击 <span class="menu">文件</span> 菜单），然后点击 <span class="menu">退出</span></span>
<span class="btn_solid_gray">灰色实线按钮的效果</span>

</body>

灰色实线按钮效果：

Firefox：