CSS
html, body {margin:0;padding:0}
body {margin:10px 20px;background-color:#000;color:#fff}
#top nav ul {
width:940px;
margin:20px auto 0 auto;
padding:0;
height:32px;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
border-bottom:5px solid #9b9b9b;
}
#top nav ul li {
list-style:none;
display:block;
float:left;
margin:0 5px 0 0;
}
#top nav ul li a {
color:#fff;
text-decoration:none;
padding:5px 30px;
line-height: 39px;
font-weight:bold;
border-radius:5px 5px 0 0;
background: #313131;
background: -moz-linear-gradient(top, #313131 0%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#313131), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(top, #313131 0%,#1b1b1b 100%);
background: -o-linear-gradient(top, #313131 0%,#1b1b1b 100%);
background: -ms-linear-gradient(top, #313131 0%,#1b1b1b 100%);
background: linear-gradient(top, #313131 0%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313131', endColorstr='#1b1b1b',GradientType=0 );
border-top:1px solid #555;
text-shadow:0 1px 2px #000;
transition: .1s ease-in-out;
-webkit-transition: .1s ease-in-out;
-moz--webkit-transition: .1s ease-in-out;
-ms-transition-property: .1s ease-in-out;
position:relative;
bottom:0px;
}
#top nav ul li a:hover, #top nav ul li a.selected {
color:#000;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 8%, #9b9b9b 96%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#eeeeee), color-stop(96%,#9b9b9b));
background: -webkit-linear-gradient(top, #eeeeee 8%,#9b9b9b 96%);
background: -o-linear-gradient(top, #eeeeee 8%,#9b9b9b 96%);
background: -ms-linear-gradient(top, #eeeeee 8%,#9b9b9b 96%);
background: linear-gradient(top, #eeeeee 8%,#9b9b9b 96%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#9b9b9b',GradientType=0 );
border-top:1px solid #fff;
text-shadow:0 1px 1px #fff;
position:relative;
}
#top nav ul li a:hover {
padding: 8px 30px;
position:relative;
bottom:3px;
}
.content {
font-family:Arial, Helvetica, sans-serif;
line-height:1.5em;
font-size: 0.8em;
clear:both;
width:916px;
margin:0 auto;
padding:20px 10px;
background: #222;
box-shadow:inset 1px 1px 20px #000;
border:2px solid #222;
border-radius: 0 0 10px 10px;
}
.content h2 {font-weight:normal;}
.split {
box-sizing: border-box;
-o-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 447px;
margin:5px;
float:left;
display:block;
background:#333;
box-shadow:inset 0 0 20px #000;
border-radius:10px;
padding:10px 20px;
border:1px solid #101010;
}
.section {background:rgba(0,0,0,0.3);}
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {text-decoration:none}
.button:active {position: relative;box-shadow:inset 0 0 5px #000}
.bigrounded {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em}
.medium {font-size: 12px;padding: .4em 1.5em .42em;font-weight:bold}
.small {text-transform:uppercase;font-size: 11px;padding: .2em 1em .275em;font-weight:normal}
.black {
color: #d7d7d7;
border: solid 1px #000;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
-webkit-transition: all .2s ease-in;
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #000;
}
.black:active {
color: #888;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border:1px solid #000;
-moz-box-shadow:inset 0 0 20px #000;
-webkit-box-shadow:inset 0 0 20px #000;
box-shadow:inset 0 0 20px #000;
}
/* search form
-------------------------------------- */
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #aaaaaa;
background: -moz-linear-gradient(top, #aaaaaa 0%, #333333 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#333333));
background: -webkit-linear-gradient(top, #aaaaaa 0%,#333333 100%);
background: -o-linear-gradient(top, #aaaaaa 0%,#333333 100%);
background: -ms-linear-gradient(top, #aaaaaa 0%,#333333 100%);
background: linear-gradient(top, #aaaaaa 0%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#333333',GradientType=0 );
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #333;
outline: none;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background: #5b5b5b;
background: -moz-linear-gradient(top, #5b5b5b 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #5b5b5b 0%,#000000 100%);
background: -o-linear-gradient(top, #5b5b5b 0%,#000000 100%);
background: -ms-linear-gradient(top, #5b5b5b 0%,#000000 100%);
background: linear-gradient(top, #5b5b5b 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#000000',GradientType=0 );
}
.searchform .searchbutton:hover {
cursor:pointer;
border:1px solid #333;
background:#888;
-moz-box-shadow:inset 0 0 10px #000;
-webkit-box-shadow:inset 0 0 10px #000;
box-shadow:inset 0 0 10px #000;
}
HTML
<div id="top">
<nav>
<ul>
<li><a href="#" class="selected">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<div class="split section">
<h2>Search Bars</h2>
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="GO" />
</form>
</div>
<div class="split section">
<h2>Buttons</h2>
<a class="button black small" href="#">Small Button</a>
<a class="button black medium" href="#">Medium Button</a>
<a class="button black" href="#">Large Button</a>
</div>
<br style="clear:both;">
</div>