新7款HTML5/CSS3特效之立体菜单按钮

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>新7款HTML5/CSS3特效之立体菜单按钮
		</title>
	</head>
	<body>
		<div id="content" style="width:500px;margin:0 auto">
			<h3>Dark Navigation Buttons
			</h3>
			<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" value="Search" onclick="$(this).val('');" />
					<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>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

/* The following styles are used only for this page - the actual plugin styles are in slidernav.css */
* {
  margin: 0;
  padding: 0;
}
body {
  background: url(//ku.shouce.ren/files/images/201603/56e5193fefbb9.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;
}
/* Dark Button CSS */
.button {
  outline: 0;
  padding: 5px 12px;
  display: block;
  color: #9fa8b0;
  font-weight: bold;
  text-shadow: 1px 1px #1f272b;
  border: 1px solid #1c252b;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #232B30;
  /* old browsers */
  background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30));
  /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 );
  /* ie */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* CSS3 */
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* Safari, Chrome */
}
.button:hover {
  color: #fff;
  background: #4C5A64;
  /* old browsers */
  background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940));
  /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 );
  /* ie */
}
.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 */
}
/* Other stuff: */
.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 CSS: */
.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;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  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 */
}
.search-input:focus {
  outline: none;
}
.search-submit {
  width: 13px;
  height: 13px;
  border: none;
  background: url(//ku.shouce.ren/files/images/201603/56e519a1d72ba.png) no-repeat;
  display: block;
  position: absolute;
  left: 26px;
  top: 10px;
  text-indent: -9999em;
}
/* Vertical List: */
.vertical-list {
  list-style: none;
  padding: 10px;
  width: 200px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  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 */
}
.vertical-list .button {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #515B62;
  /* old browsers */
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147));
  /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 );
  /* ie */
}
.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;
  /* old browsers */
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147));
  /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 );
  /* ie */		-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
  /* Firefox */
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* Safari, Chrome */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  /* CSS3 */
}
.vertical-list li {
  margin: 0 0 5px;
}
.vertical-list li:last-child {
  margin: 0;
}

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

新7款HTML5/CSS3特效之立体菜单按钮

分类

表单按钮

描述

CSS3在按钮应用中非常常见，效果也都不错，一般利用CSS3制作的按钮都会有以下几个特点：1、色彩丰富，按钮不像CSS那样单一，利用CSS3的渐变色可以让按钮变得色彩多姿。2、3D立体效果，利用CSS3投影和阴影特性往往可以让按钮充满立体感。