本文实例讲述了CSS实现五颜六色按钮组成的导航条效果代码。分享给大家供大家参考。具体如下：

这里介绍一款CSS实现五颜六色按钮组成的炫丽导航菜单，其实“按钮”并不是真正的按钮元素，而是由CSS模拟出来的，这样有得你变换样式，配上黑色的背景，看上去很酷。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

复制代码代码如下:

/p>

"http://www.w3.org/TR/html4/strict.dtd">

五颜六色的按钮组成的导航条

* {

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;

}

希望本文所述对大家的CSS网页设计有所帮助。