Shading Button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Trial Services</title>
<style type='text/css'>
/* CSS Document */
body {
background: #fff;
color: #0F0F0F;
font: 15px/20px Arial, Helvetica, sans-serif;
margin: 32px 0 0;
padding: 0;
}
div,ul,h1,h2,h3,li,p,img {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
/* TOP PANEL*/
#topPanel {
width: 762px;
height: 373px;
position: relative;
margin: 0 auto;
padding: 0;
}
#topPanel img {
width: 230px;
height: 80px;
z-index: 1;
padding: 0;
position: absolute;
margin: 0 0 0 21px;
}
/* MENU PANEL*/
#topPanel ul {
display: block;
width: 732px;
height: 36px;
position: absolute;
top: 0;
right: 0;
margin: 11px 0 0;
padding: 0 29px 0 0;
border-bottom: 1px solid #AEAEAE;
}
#topPanel ul li {
float: right;
font: 12px/36px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#topPanel ul li a {
width: 74px;
height: 36px;
display: block;
padding: 0;
color: #555;
background: #fff;
text-decoration: none;
text-align: center;
margin: 0 1px 0 0;
top: 0px;
left: 0px;
}
#topPanel ul li a:hover {
width: 74px;
height: 36px;
text-decoration: none;
background: url(101x-images/button.gif) no-repeat 0 0 #AEAEAE;
color: #fff;
}
#topPanel ul li.active {
width: 74px;
display: block;
height: 36px;
background: url(101x-images/button.gif) no-repeat 0 0 #AEAEAE;
color: #fff;
text-align: center;
margin: 0 1px 0 0;
}
/* HEADER PANEL*/
#topPanel #headerPanelfast {
width: 246px;
height: 263px;
position: absolute;
top: 0;
left: 0;
margin: 110px 0 0;
padding: 0px;
background: url(101x-images/orange-normal.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
}
#topPanel #headerPanelfast a {
width: 246px;
height: 263px;
display: block;
text-decoration: none;
}
#topPanel #headerPanelfast a:hover {
width: 246px;
height: 263px;
background: url(101x-images/orange-hover.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
text-decoration: none;
}
#topPanel #headerPanelfast h2 {
display: block;
width: 90px;
height: 47px;
margin: 54px 0 0 120px;
font: 28px/28px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#topPanel #headerPanelfast p {
width: 163px;
display: block;
font: 12px/18px Arial, Helvetica, sans-serif;
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
padding: 0;
margin: 105px 50px 0 38px;
}
#topPanel #headerPanelsecond {
width: 246px;
height: 263px;
position: absolute;
top: 0;
left: 258px;
margin: 110px 0 0;
padding: 0px;
background: url(101x-images/green-normal.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
}
#topPanel #headerPanelsecond a {
width: 246px;
height: 263px;
display: block;
text-decoration: none;
}
#topPanel #headerPanelsecond a:hover {
width: 246px;
height: 263px;
background: url(101x-images/green-hover.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
text-decoration: none;
}
#topPanel #headerPanelsecond h2 {
display: block;
width: 90px;
height: 47px;
background: none;
margin: 54px 0 0 103px;
font: 28px/28px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
padding: 0;
position: absolute;
z-index: 1;
}
#topPanel #headerPanelsecond p {
width: 163px;
display: block;
font: 12px/18px Arial, Helvetica, sans-serif;
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
padding: 0;
margin: 105px 50px 0 38px;
}
#topPanel #headerPanelthird {
width: 246px;
height: 263px;
position: absolute;
top: 0;
right: 0;
margin: 110px 0 0;
padding: 0px;
background: url(101x-images/blue-normal.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
}
#topPanel #headerPanelthird a {
width: 246px;
height: 263px;
display: block;
text-decoration: none;
}
#topPanel #headerPanelthird a:hover {
width: 246px;
height: 263px;
background: url(101x-images/blue-hover.jpg) no-repeat 0 0 #FC5F00;
color: #fff;
text-decoration: none;
}
#topPanel #headerPanelthird h2 {
display: block;
width: 90px;
height: 47px;
background: none;
margin: 54px 0 0 93px;
font: 28px/28px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
padding: 0;
position: absolute;
z-index: 1;
}
#topPanel #headerPanelthird p {
width: 163px;
display: block;
font: 12px/18px Arial, Helvetica, sans-serif;
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
padding: 0;
margin: 105px 50px 0 38px;
}
/* /TOP PANEL*/
/* BODY PANEL*/
#bodyPanel {
width: 762px;
height: 640px;
position: relative;
margin: 0 auto;
padding: 0;
}
#bodyPanel h2 {
background: #fff;
display: block;
width: 250px;
height: 50px;
margin: 0;
font: 30px/30px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
padding: 4px 0 0 202px;
color: #FF7113;
}
#bodyPanel p {
background: url(101x-images/symbol.jpg) 0 0 no-repeat #fff;
margin: 0 0 0 54px;
padding: 0 42px 35px 150px;
color: #0F0F0F;
}
#bodyPanel p span {
font-weight: bold;
}
#bodyPanel p.dotline {
background: url(101x-images/dot-line.gif) 0 0 repeat-x #fff;
padding: 0;
margin: 0 40px 0 25px;
color: #000;
}
#bodyPanel p.capstext {
background: url(101x-images/name.gif) bottom right no-repeat #fff;
font: 18px/24px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #555555;
padding: 2px 10px 0 25px;
margin: 0 35px 10px 0;
}
#bodyPanel p.more {
height: 26px;
padding: 0;
background: none;
margin: 0;
}
#bodyPanel p.more a {
width: 76px;
height: 26px;
display: block;
margin: 314px 20px 19px 618px;
background: url(101x-images/more.gif) 0 0 no-repeat #fff;
color: #555;
text-decoration: none;
font: 15px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0 0 0 10px;
text-transform: uppercase;
position: absolute;
top: 0px;
right: 0px;
}
#bodyPanel p.more a:hover {
background: url(101x-images/more.gif) 0 0 no-repeat #fff;
color: #216EBD;
text-decoration: none;
}
#bodyPanel h3 {
background: #fff;
display: block;
width: 250px;
height: 34px;
margin: 34px 0 12px 0;
font: 30px/30px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
padding: 0 0 0 20px;
color: #FF7113;
}
#bodyPanel #testimonial {
width: 283px;
height: 162px;
display: block;
background: url(101x-images/testimonial-bg.gif) 0 0 no-repeat #FFF6DB;
padding: 32px 33px 0 148px;
margin: 0 0 0 20px;
color: #786321;
}
#bodyPanel #testimonial p {
background: none;
margin: 0;
padding: 0 0 5px 0;
}
#bodyPanel #testimonial p span {
color: #786321 !Important;
background: #FFFAED !Important;
}
#bodyPanel p.moretwo {
height: 26px;
padding: 0;
background: none;
margin: 0;
}
#bodyPanel p.moretwo a {
width: 76px;
height: 26px;
display: block;
margin: 0px 0px 0px 196px;
background: url(101x-images/more2.gif) 0 0 no-repeat #FFF5D6;
color: #555;
text-decoration: none;
font: 15px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 0 0 0 10px;
top: 0px;
right: 0px;
}
#bodyPanel p.moretwo a:hover {
background: url(101x-images/more2.gif) 0 0 no-repeat #FFF5D6;
color: #216EBD;
text-decoration: none;
}
#bodyPanel h4 {
background: #fff;
width: 250px;
height: 30px;
position: absolute;
top: 361px;
right: 5px;
margin: 0;
font: 30px/30px Georgia, "Times New Roman", Times, serif;
font-weight: normal;
padding: 0px;
color: #FF7113;
}
#bodyPanel ul {
width: 225px;
display: block;
position: absolute;
right: 30px;
top: 405px;
}
#bodyPanel ul li {
font: 12px/25px Arial, Helvetica, sans-serif;
font-weight: normal;
background: url(101x-images/symbol2.gif) 0 8px no-repeat;
padding: 0 0 0 30px;
}
#bodyPanel ul span {
background: url(101x-images/dot-line.gif) repeat-x 0 100%;
height: 25px;
display: block;
}
/* FOOTER PANEL*/
#footerPanel {
width: 100%;
background: #DCDCDC;
color: #4C4C4C;
font-size: 12px;
}
#footerbodyPanel {
width: 762px;
height: 133px;
position: relative;
margin: 0 auto;
padding: 0;
}
#footerPanel ul {
width: 320px;
display: block;
position: absolute;
right: 10px;
top: 33px;
}
#footerPanel li {
float: left;
font: 12px/15px Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPanel ul li a {
padding: 0 6px;
color: #4C4C4C;
background: #DCDCDC;
text-decoration: none;
}
#footerPanel ul li a:hover {
text-decoration: underline;
}
#footerPanel ul li a.padl {
padding: 0 0 0 6px;
}
#footerPanel p.copyright {
background: #DCDCDC;
display: block;
position: absolute;
top: 54px;
right: 45px;
color: #A64200;
}
#footerPanel ul.templateworld {
width: 158px;
background: #DCDCDC;
color: #4C4C4C;
display: block;
position: absolute;
top: 74px;
right: 40px;
}
#footerPanel ul.templateworld li a {
background: #DCDCDC;
display: block;
color: #4C4C4C;
text-decoration: none;
}
#footerPanel ul.templateworld li a:hover {
text-decoration: underline;
}
#footerhtmlPanel {
width: 86px;
height: 31px;
display: block;
position: absolute;
top: 34px;
left: 29px;
margin: 0;
padding: 0;
}
#footerhtmlPanel a {
width: 86px;
height: 31px;
display: block;
background: url(101x-images/html-img.gif) no-repeat 0 0 #DCDCDC;
text-decoration: none;
font: 14px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2F2F2F;
text-transform: uppercase;
padding: 0 0 0 10px;
position: absolute;
top: 0px;
right: 0px;
}
#footerhtmlPanel a:hover {
background: url(101x-images/html-img.gif) no-repeat 0 0 #DCDCDC;
color: #216EBD;
text-decoration: none;
}
#footercssPanel {
width: 86px;
height: 31px;
display: block;
position: absolute;
top: 34px;
left: 115px;
margin: 0;
padding: 0;
}
#footercssPanel a {
width: 86px;
height: 31px;
display: block;
background: url(101x-images/css-img.gif) no-repeat 0 0 #DCDCDC;
text-decoration: none;
font: 14px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2F2F2F;
text-transform: uppercase;
padding: 0 0 0 10px;
position: absolute;
top: 0px;
right: 0px;
}
#footercssPanel a:hover {
background: url(101x-images/css-img.gif) no-repeat 0 0 #DCDCDC;
color: #216EBD;
text-decoration: none;
}
</style>
</head>
<body>
<div id="topPanel">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#"> Support</a></li>
<li><a href="#">About us</a></li>
<li class="active">Home</li>
</ul>
<a href="index.html"><img src="101x-images/logo.gif" title="Trial Services" alt="Trial Services" width="230" height="80" border="0" /></a>
<div id="headerPanelfast">
<h2>design</h2>
<p>Lorem Ipsum is simply try's standard dummy text ever since the 1500s,Lorem Ipsimply try's </p>
<a href="#">
</a></div>
<div id="headerPanelsecond">
<h2>success</h2>
<p>Lorem Ipsum is simply try's standard dummy text ever since the 1500s,Lorem Ipsimply try's </p>
<a href="#">
</a></div>
<div id="headerPanelthird">
<h2>services</h2>
<p>Lorem Ipsum is simply try's standard dummy text ever since the 1500s,Lorem Ipsimply try's </p>
<a href="#">
</a></div>
</div>
<div id="bodyPanel">
<h2>About Us</h2>
<p>Trial Services is a <span>free, tableless, W3C-compliant</span> web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like. We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p class="dotline"><img src="101x-images/blank.gif" alt="" width="1" height="1" /></p>
<p class="capstext">If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="dotline"><img src="101x-images/blank.gif" alt="" width="1" height="1" /></p>
<p class="more"><a href="#">More</a></p>
<h3>Testimonials</h3>
<h4>Solutions</h4>
<ul>
<li><span>Popularised in the 1960s with</span> </li>
<li><span>The release of Letraset sheets</span> </li>
<li><span>Containing Lorem Ipsum</span> </li>
<li><span>Lorem unknownindustry's </span> </li>
<li><span>Standard dummy text ever </span> </li>
<li><span>Since the 1500s, when an</span> </li>
<li>Unknown printer took a galley </li>
</ul>
<div id="testimonial">
<p><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
Lorem Ipsum has been the.ing essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum</p>
<p class="moretwo"><a href="#">More</a></p>
</div>
</div>
<div id="footerPanel">
<div id="footerbodyPanel">
<ul>
<li><a href="#">Home </a>| </li>
<li><a href="#">About us</a> | </li>
<li><a href="#">Support </a>| </li>
<li><a href="#">Clients</a> | </li>
<li><a href="#">Contact </a> </li>
</ul>
<p class="copyright">>> trial services all right reaserved</p>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
<div id="footerhtmlPanel"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a></div>
<div id="footercssPanel"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category