今天小编跟大家讲解下有关CSS实现五颜六色按钮组成的导航条效果代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现五颜六色按钮组成的导航条效果代码 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了CSS实现五颜六色按钮组成的导航条效果代码。分享给大家供大家参考。具体如下：
这里介绍一款CSS实现五颜六色按钮组成的炫丽导航菜单，其实“按钮”并不是真正的按钮元素，而是由CSS模拟出来的，这样有得你变换样式，配上黑色的背景，看上去很酷。
运行效果截图如下：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-n-color-button-nav-style-demo/
具体代码如下：
复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>五颜六色的按钮组成的导航条</title><style>* { margin:0; padding:0;}#wrapper { margin:0 auto; text-align:left;}.container { padding: 0 0 36px;}.columns { display: block; clear:both; overflow:hidden; margin:0; padding:10px 20px;}a, a:visited { color:#333; text-decoration:none}#header { background: #000; height: 68px; border: 1px solid #eee; margin: 0;}#header h1 { float: left; text-indent:18px; color:#eee; margin-top:10px;}#header h3 { clear:both; text-align:right}#header h3 a { margin-right:10em; color:#CCC; font-weight: normal;}.page-header { padding: 0 0 8px; margin: 18px 0; border-bottom: 1px solid #ddd;}.page-header h2 { padding: 0; margin: 0; font-size: 24px; line-height: 27px; letter-spacing: 0; text-indent:2em;}.btn, .btn:visited { display: inline-block; padding: 4px 10px; font:bold 12px/180% Tahoma; color: #fff; text-decoration: none; overflow:hidden; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); cursor: pointer;}.btn:hover { background-color: #111;}.btn:active { top: 1px;}.green.btn, .green.btn:visited { background-color: #91bd09;}.green:hover { background-color: #749a02;}.blue, .blue:visited { background-color: #2daebf;}.blue:hover { background-color: #007d9a;}.red, .red:visited { background-color: #e33100;}.red:hover { background-color: #872300;}.magenta, .magenta:visited { background-color: #a9014b;}.magenta:hover { background-color: #630030;}.orange, .orange:visited { background-color: #ff5c00;}.orange:hover { background-color: #d45500;}.yellow, .yellow:visited { background-color: #ffb515;}.yellow:hover { background-color: #fc9200;}</style></head><body><div id="wrapper"> <div class=" container"> <div class="columns" style="background: #333; padding:30px 20px"> <a class="btn">脚本下载</a> <a class="blue btn">站长生活</a> <a class="magenta btn">站长杂志</a> <a class="red btn">站长访谈</a> <a class="orange btn">程序时空</a> <a class="yellow btn">编程人生</a> <a class="btn blue">站长时空</a> </div> <br class="clear"/> </div></div></body></html>
希望本文所述对大家的CSS网页设计有所帮助。
来源：爱蒂网