最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

CSS crifan 820浏览 0评论

想要通过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

中的按钮的效果:

button effect in firefox


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:

effect in firefox

IE9:

effect in IE9

Chrome:

effect in 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:

gray solid button firefox

IE9:

gray solid button IE9

Chrome:

gray solid button chrome

4.另外,还有个:

http://css-button-generator.com/

也不错,有空可以去试试。

【总结】

有点意思。

有空整合到Docbook生成的html中。

貌似需要先生成class,然后再添加css去控制。

转载请注明:在路上 » 【记录】通过CSS控制文字显示出按钮的效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.109 seconds, using 18.77MB memory