以前做网页时候一般一些渐变的导航条和菜单效果都是用背景图片来实现想要的效果，今天用css3实现了一些灰色的漂亮的导航按钮效果，主要分为两种，

源代码下载地址：http://download.csdn.net/my

主要运用的css3中的渐变技术和border-radius,box-shadow技术；主要实现三种效果，当默认状态：hover及:active时效果。

html代码如下：

<div id="content">
  <h2>Dark Navigation Buttons</h2>
  <p>The following buttons are created using only CSS3 and make use of a variety of effects (gradients, shadows, borders).</p>
  <ul class="button-list">
    <li><a href='/' class='button' onClick="return false;">Home</a></li>
    <li><a href='/' class='button' onClick="return false;">About</a></li>
    <li><a href='/' class='button' onClick="return false;">Portfolio</a></li>
    <li><a href='/' class='button' onClick="return false;">Blog</a></li>
    <li class="search">
      <input type="text" class="search-input" name="search" />
      <input type="submit" class="search-submit"  />
    </li>
  </ul>
  <h3>Vertical Menu:</h3>
  <ul class="vertical-list">
    <li><a href='/' class='button' onClick="return false;">Home</a></li>
    <li><a href='/' class='button' onClick="return false;">Our Studio</a></li>
    <li><a href='/' class='button' onClick="return false;">Portfolio</a></li>
    <li><a href='/' class='button' onClick="return false;">Our Team</a></li>
    <li><a href='/' class='button' onClick="return false;">Get in Touch</a></li>
  </ul>
</div>

css代码如下：

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background:url(images/bg.gif);
}
#content {
    padding: 40px 20px;
    font-family: "Helvetica Neue", Helvetica, Arial;
    font-size: 12px;
    line-height: 18px;
    color: #cfdae3;
}
a {
    text-decoration: none;
}
h2, h3 {
    margin: 0 0 20px;
    color: #fff;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}
pre {
    background: #fff;
    width: 460px;
    padding: 10px 20px;
    border-left: 5px solid #ccc;
    margin: 0 0 20px;
}
p {
    width: 500px;
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 30px;
}
input {
    margin: 0;
    padding: 0;
}
.button {
    outline:0;
    padding:5px 12px;
    display:block;
    color:#9fa8b0;
    font-weight:bold;
    text-shadow:1px 1px #1f2f2b;
    border:1px solid #1c252b;
    border-radius:3px;
    background:#232b30;
    background:-moz-linear-gradient(top, #3d4850 3%, #313d45 4%, #232b30 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(3%, #3d4850), color-stop(4%, #313d45), color-stop(100%, #232b30));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d4850', endColorstr='#232b30', GradientType=0);
    box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
.button:hover {
    color:#fff;
    background:#4c5a64;
    background:-moz-linear-gradient(top, #4c5a6a 3%, #404f5a 4%, #2e3940 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(3%, #4c5a64), color-stop(4%, #404f5a)), color-stop(100%, #2e3940);
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940', GradientType=0);
}
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #20282D), color-stop(51%, #252E34), color-stop(100%, #222A30)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30', GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.button-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    float: left;
    display: block;
    margin: 0 0 30px;
}
.button-list li {
    float: left;
    margin: 0 10px 0 0;
}
.button-list li.search {
    border-left: 1px solid #273137;
    padding-left: 18px;
    margin-left: 10px;
    position: relative;
}
.search-input {
    padding:0 5px 0 22px;
    border:1px solid #1c252b;
    height:30px;
    color:#9fa8b0;
    font-size:12px;
    line-height:30px;
    font-weight:bold;
    text-shadow:1px 1px #1f272b;
    border-radius:25px;
    background:#20282d;
    background:-moz-linear-gradient(top, #20282d 3%, #252e34 51%, #222a30 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(3%, #20282d), color-stop(51%, #252e34), color-stop(100%, #222a30));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#20282d', endColorstr='#222a30', GradientType=0);
    box-shadow:1px 1px 1px rgba(255,255,255,0.1);
}
.search-input:focus {
    outline:none;
}
.search-submit {
    width:13px;
    height:13px;
    border:none;
    background:url(images/mag-glass.png) no-repeat;
    display:block;
    top:10px;
    left:26px;
    text-indent:-9999em;
    position:absolute;
}
.vertical-list {
    list-style:none;
    padding:10px;
    width:200px;
    border-radius:5px;
    background:#20282d;
    background:-moz-linear-gradient(top, #20282d 3%, #252e34 51%, #222a30 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(3%, #20282d), color-stop(51%, #252e34), color-stop(100%, #22a30));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#20282d', endColorstr='#222a30', GradientType=0);
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.vertical-list .button {
    border-radius:5px;
    background: #515B62;
    background:-moz-linear-gradient(top, #515b62 3%, #444e55 5%, #394147 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(3%, #515b62), color-stop(5%, #444e55), color-stop(100%, #394147));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#515b62', endColorstr='#394147', GradientType=0)
}
.vertical-list .button:hover {
    background: #5F6B72; /* old browsers */
    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #5F6B72), color-stop(4%, #56646C), color-stop(50%, #4D5A62), color-stop(100%, #434D54)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54', GradientType=0 ); /* ie */
}
.vertical-list .button:active {
    padding:5px 12px;
    top:0;
    background:#515b62;
    background:-moz-linear-gradient(top, #515b62 3%, #444e55 5%, #394147 100%);
 background:-webkit-gradient(linear.left top, left bottom, color-stop(3%, #515b62), color-stop(5%, #44e55), color-stop(100%, #394147));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#515b62', endColorstr='#394147', GradientType=0);
    box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
.vertical-list li {
    margin: 0 0 5px;
}
</style>

主要支持的浏览器firefox,chrome,ie9,ie8及以下不支持圆角效果


css3实现的一些灰色的导航条按钮相关推荐

  1. Photoshop轻松制作Apple网站导航条按钮

      P>Photoshop教程,利用Photoshop模拟制作Apple.Com苹果网站的网站导航条按钮.最终大家可以去http://www.apple.com网站对比下效果. 1.新建立一个5 ...

  2. UIBarButtonItem导航条按钮封装

    系统导航条应该再iOS开发项目中都会有用到.但是有时间长篇大论的在C里边写一大串代码,未必会有些繁杂.基于封装角度,今天我们来做一个导航条UIBarButtonItem的进一步封装,让代码更简洁 今天 ...

  3. uniapp渐变式导航条按钮出发事件

    一.渐变式导航条 1. 回到之前所创建的图标项目中,点击下载至本地–>打开解压包–>iconfont.ttf文件放过static 中 2.去pages.json中找到首页插入如下代码: & ...

  4. 毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果

    这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...

  5. 使用CSS3制作倾斜导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  6. WHMCS 6 如何修改导航条菜单（主菜单）

    如果你刚升级了 WHMCS 6 ,你会发现导航条菜单连产品分类都没有. 如果你是做 WHMCS 模板开发的,你会发现 WHMCS 6 的主菜单已经不能直接在模板修改了. 那如何修改 WHMCS 6 导 ...

  7. iOS小技能：自定义导航栏，设置全局导航条外观。（iOS15适配）

    文章目录 前言 I 自定义导航栏 1.1 自定义导航条 1.2 设置全局导航条按钮主题 1.3 设置导航条渐变颜色 1.4 ` 拦截push` II 相关代码 see also 前言 需求:同一个模块 ...

  8. 仿淘宝网首页导航条效果

    < html > < head > < meta http - equiv = " Content-Type "  content = " ...

  9. HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解

    导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...

最新文章

  1. 更改图片位置_如何轻松快速地将图片转换到JPG/JPEG/PNG/BMP/TIFF
  2. 蓝色巨人IBM全力奔赴的混合云之旅能顺利吗？
  3. 每天干的啥？（2018.06）
  4. jQuery获取不到隐藏DIV的高度和宽度
  5. Word编辑页码不从第一页开始
  6. 31、Flutter之Hero动画
  7. win10系统无法连接xp工作组计算机,win10系统看不到windows xp系统主机上工作组的具体教程...
  8. 票房突破9亿，翻拍片《误杀》凭什么收获票房口碑双丰收?
  9. CES2020，到底发布了哪些高科技？
  10. bga封装扇出过孔_手把手教你BGA元器件如何扇出？-EDA/PCB-与非网
  11. 糖尿病新世界杂志糖尿病新世界杂志社糖尿病新世界编辑部2022年第12期目录
  12. How to fix ORA-01017：用户名/口令无效 登录拒绝
  13. ipad ios 电子杂志制作软件 ipad ios 电子杂志制作开发软件
  14. 宝塔面板子目录伪静态设置
  15. Unity 常用插件
  16. 深入理解 Linux 的 TCP 三次握手
  17. 解决在IE11浏览器上，css样式不起作用的问题
  18. ESP8089 射频测试工具的使用
  19. 轻轻松松学习SpringBoot2：第十九篇： 数据库操作（三）：事务
  20. PTA-＞一元多项式的乘法与加法运算

热门文章

  1. html打开显示脚本错误,IE浏览器显示脚本错误怎么办 IE浏览器脚本错误解决方法图文教程...
  2. 地区的json数据_数据密集型系统基础：数据模型与查询语言
  3. oracle ora32771,Oracle的文件号、相对文件号及其他（续）
  4. 基于FPGA的车牌识别系统
  5. 2021年上半年软考网络工程师考试下午真题及答案解析
  6. SQL Server数据库-限制返回行数
  7. 超级有用的15个mysqlbinlog命令
  8. Spring 笔记
  9. HTML的SEO（搜索引擎优化）标准
  10. 浅谈tomcat的配置及数据库连接池的配置