Make anchor a button : CSS Button « CSS Controls « HTML / CSS

Make anchor a 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>
<title>2 Breed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0px;
  padding: 0px;
  background: #414141
}

#topContentWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #f9f7db url(2-breed-images/bodyBg.jpg) repeat-x
}

#topContent {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#logoPanel {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
  background: url(2-breed-images/globalpic.jpg) no-repeat
}

#logoPanel h1 {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
}

#aboutPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #cd4007 url(2-breed-images/globalpic.jpg) no-repeat -77px
    -494px
}

#home {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#home a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/homeBg.gif) no-repeat
}

#home a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/homeBg.gif) no-repeat -48px 0
}

#aboutPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#aboutPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#aboutPanel p {
  width: 170px;
  margin: 20px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f8d85e;
  line-height: 19px
}

#aboutPanel p a {
  color: #f8d85e;
  background: #9f3105;
  text-decoration: none
}

#aboutPanel p a:hover {
  background: #812a08
}

#aboutPanel .read {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0 0 0 131px;
  float: left
}

#aboutPanel .read a {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat
}

#aboutPanel .read a:hover {
  color: #cd4007
}

#eventPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  border-left: #f3f1d2 solid 1px;
  background: #9fb31a url(2-breed-images/globalpic.jpg) no-repeat -294px
    -494px
}

#about {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#about a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/about.gif) no-repeat
}

#about a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/about.gif) no-repeat -48px 0
}

#eventPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#eventPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#eventPanel ul {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  display: block
}

#eventPanel ul li {
  width: 170px;
  margin: 3px 0 0 0;
  padding: 0 0 14px 0;
  float: left;
  display: block
}

#eventPanel ul li h2 {
  width: 170px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffffff;
  line-height: 14px;
  font-weight: bold
}

#eventPanel ul li p {
  width: 170px;
  margin: 5px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f2ff9a;
  line-height: 19px
}

#eventPanel ul li p a {
  font-size: 12px;
  color: #f2ff9a;
  float: none;
  background: #75850e
}

#eventPanel ul li p a:hover {
  color: #f2ff9a;
  background: #525d08
}

#eventPanel ul li a {
  width: 62px;
  height: 23px;
  margin: 14px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat -62px 0
}

#eventPanel ul li a:hover {
  color: #9fb31a
}

#rightPanel {
  width: 400px;
  margin: 0px;
  padding: 0 0 0 20px;
  float: left
}

#menu {
  width: 191px;
  margin: 22px 0 0 0;
  padding: 0 34px 0 0;
  float: left
}

#menu ul {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li a {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: #b1ae7e dotted 1px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a:hover {
  color: #75850e
}

#menu ul li a.bottom {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 0px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a.bottom:hover {
  color: #9fb31a
}

#addBlock {
  width: 171px;
  height: 195px;
  margin: 22px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -337px -110px
}

#rightPanel h2 {
  width: 343px;
  height: 44px;
  margin: 29px 0 0 0;
  padding: 0 0 0 57px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #cb3e07;
  line-height: 40px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -467px -308px
}

#additionalLinks {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left
}

#additionalLinks ul {
  width: 400px;
  margin: 12px 0 0 0;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li a {
  width: 371px;
  height: 27px;
  margin: 3px 0 0 0;
  padding: 0 0 0 27px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #3b3a2b;
  line-height: 25px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -83px
}

#additionalLinks ul li a:hover {
  color: #9fb31a
}

#iconLinks {
  width: 400px;
  height: 101px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#iconLinks .ideas {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -77px -392px
}

#iconLinks .blank {
  width: 9px;
  height: 101px;
  margin: 0px;
  padding: 0px;
  float: left
}

#iconLinks .signup {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -204px -392px
}

#iconLinks .blog {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -331px -392px
}

#newsLetter {
  width: 284px;
  height: 71px;
  margin: 25px 0 0 0;
  padding: 10px 0 0 114px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px 0
}

#newsLetter h3 {
  width: 284px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 22px
}

#newsLetter input {
  width: 206px;
  height: 18px;
  margin: 5px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#newsLetter a {
  width: 41px;
  height: 23px;
  margin: 4px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -226px
}

#newsLetter .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#middleWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #e9e6c3 url(2-breed-images/middleBg.jpg) repeat-x
}

#middlePanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#middlePanel .left {
  width: 473px;
  margin: 0px;
  padding: 0 31px 34px 26px;
  float: left
}

#middlePanel .left h2 {
  width: 423px;
  height: 38px;
  margin: 24px 0 0 0;
  padding: 0 0 0 50px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #1d1d1d;
  line-height: 38px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -474px -357px
}

#middlePanel .left p {
  width: 470px;
  margin: 9px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #575433;
  line-height: 19px
}

#middlePanel .left p span {
  font-weight: bold;
  color: #8da00d
}

#middlePanel .left a {
  width: 62px;
  height: 23px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -117px -226px
}

#loginPanel {
  width: 202px;
  height: 184px;
  margin: 19px 0 0 0;
  padding: 0px;
  float: left;
  border: #d7d3aa solid 1px;
  background: #f1eed0
}

#loginPanel h2 {
  width: 169px;
  height: 34px;
  margin: 0px;
  padding: 0 0 0 33px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 30px;
  font-weight: normal;
  background: #ffffff url(2-breed-images/globalpic.jpg) no-repeat -483px
    -399px
}

#loginPanel h3 {
  width: 168px;
  margin: 8px 0 0 0;
  padding: 0 17px 0 17px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #1d1d1d;
  line-height: 14px;
  font-weight: normal
}

#loginPanel input {
  width: 167px;
  height: 18px;
  margin: 3px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#loginPanel .blank {
  width: 17px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#loginPanel p {
  width: 127px;
  margin: 9px 0 0 0;
  padding: 0 0 0 17px;
  float: left
}

#loginPanel p a {
  font-family: Arial;
  font-size: 12px;
  color: #9fb31a;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
}

#loginPanel .login {
  width: 41px;
  height: 23px;
  margin: 6px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -180px -226px
}

#contact {
  width: 175px;
  height: 107px;
  margin: 21px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -111px
}

#contact p {
  font-family: "Arial Narrow";
  font-size: 26px;
  color: #252525;
  line-height: 30px;
  margin: 10px 0 0 0;
  padding: 0 0 0 28px
}

#gap {
  width: 19px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#footWrap {
  width: 100%;
  margin: 0px;
  padding: 0 0 23px 0;
  float: left;
  background: url(2-breed-images/footbg.jpg) repeat-x
}

#footPanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#footNav {
  width: 928px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#footNav ul {
  width: 655px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#footNav ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#footNav ul li .blank {
  width: auto;
  margin: 3px 0 0 0;
  padding: 0 7px 0 7px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px
}

#footNav ul li a {
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px;
  text-decoration: none;
  margin: 0px;
  padding: 0px
}

#copyright {
  width: 928px;
  margin: 3px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #9fb31a;
  line-height: 14px;
  text-align: center
}

#validation {
  width: 928px;
  margin: 11px 0 0 0;
  padding: 0px;
  float: left
}

#validation ul {
  width: 132px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#validation ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#validation ul li .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#validation ul li a {
  width: 62px;
  height: 23px;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block;
  background: url(2-breed-images/globalpic.jpg) no-repeat -222px -226px
}

#footPanel p {
  width: 928px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #e9e6c3;
  line-height: 16px;
  font-weight: bold;
  text-align: center
}

#footPanel p a {
  color: #FFF;
  background: #252525;
  text-decoration: none
}
</style>


<link rel="icon" href="2-breed-images/icon.ico" />
</head>
<body>
<div id="topContentWrap">
  <div id="topContent">
    <div id="logoPanel">
      <h1>Make a Different Way of Your Future 2breed</h1>
    </div>
    <div id="aboutPanel">
      <div id="home"><a href="http://www.free-css.com/">Main Page</a></div>
      <h2>Who We Are</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <p>risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc pellentesque nunc a justo. Aliquam ligula elit, <a href="http://www.free-css.com/">commodo</a> nec, dictum ut, tristique eu, magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus</p>
      <div class="read"><a href="http://www.free-css.com/">read more</a></div>
    </div>
    <div id="eventPanel">
      <div id="about"><a href="http://www.free-css.com/">About Us</a></div>
      <h2>Latest Events</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <ul>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. <a href="http://www.free-css.com/">Ut a quam.</a> Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
      </ul>
    </div>
    <div id="rightPanel">
      <div id="menu">
        <ul>
          <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
          <li><a href="http://www.free-css.com/">Latest Events</a></li>
          <li><a href="http://www.free-css.com/">Our Online Support</a></li>
          <li><a href="http://www.free-css.com/">Solutions</a></li>
          <li><a href="http://www.free-css.com/">Forum</a></li>
          <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
          <li><a href="http://www.free-css.com/">Projects</a></li>
          <li><a href="http://www.free-css.com/" class="bottom">Contact Us</a></li>
        </ul>
      </div>
      <div id="addBlock"></div>
      <h2>Sociis natoque penati</h2>
      <div id="additionalLinks">
        <ul>
          <li><a href="http://www.free-css.com/">Duis vitae sem sed faucibus tortor ac turpis maecenas dbus</a></li>
          <li><a href="http://www.free-css.com/">Sapien nec nisi phasellus eget nulla id ipsum temfacilisis</a></li>
          <li><a href="http://www.free-css.com/">Sociis natoque penatibus et magnis</a></li>
          <li><a href="http://www.free-css.com/">Dis parturient montes nascetur ridiculus musquam nullam</a></li>
          <li><a href="http://www.free-css.com/">Sagittis turpis eu facilisis</a></li>
          <li><a href="http://www.free-css.com/">Accumsan nunc nibh hendrerit dolor, sit amet tinc</a></li>
        </ul>
      </div>
      <div id="iconLinks"> <a href="http://www.free-css.com/" class="ideas">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="signup">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="blog">liberot dictum </a> </div>
      <div id="newsLetter">
        <h3>Newsletter Signup</h3>
        <input name="news" type="text" value="- Enter Your Email ID -" onfocus="if(this.value=='- Enter Your Email ID -')this.value=''" onblur="if(this.value=='')this.value='- Enter Your Email ID -'"/>
        <div class="blank"></div>
        <a href="http://www.free-css.com/">Submit</a> </div>
    </div>
  </div>
</div>
<div id="middleWrap">
  <div id="middlePanel">
    <div class="left">
      <h2>Features</h2>
      <p><span>Cras sagittis, sapien et aliquam cursus,</span> diam enim varius pede, ut rutrum justo ante in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
      <p><span>Etiam urna felis, varius egestas,</span> consequat nec, dictum in, tortor. Nam vel dolor vel nisi ultrices dictum. Sed convallis, lorem ac lacinia pretium</p>
      <a href="http://www.free-css.com/">read more</a> </div>
    <div id="loginPanel">
      <h2>Member Login</h2>
      <h3>- Enter Your Name -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <h3>- Enter Your Password -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <p><a href="http://www.free-css.com/">Forgot Password ?</a></p>
      <a href="http://www.free-css.com/" class="login">Login</a> </div>
    <div id="gap"></div>
    <div id="contact">
      <p>+01-3345-4456</p>
    </div>
  </div>
</div>
<div id="footWrap">
  <div id="footPanel">
    <div id="footNav">
      <ul>
        <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Latest Events</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Our Online Support</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Solutions</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Forum</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Projects</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Contact Us</a></li>
      </ul>
    </div>
    <div id="copyright">&copy; Copyright Information Goes Here. All Rights Reserved.</div>
    <p>Designed By: <a href="http://www.templateworld.com/">TemplateWorld</a> and brought to you by <a href="http://www.smashingmagazine.com">SmashingMagazine</a></p>
    <div id="validation">
      <ul>
        <li><a href="http://validator.w3.org/check?uri=referer">xhtml valid</a></li>
        <li>
          <div class="blank"></div>
        </li>
        <li><a href="http://jigsaw.w3.org/css-validator/check/referer">css valid</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	CSS Button with anchor
2.	Shading Button
3.	Read more and Comments buttons
4.	Large Link button
5.	Enlargable link button
6.	Creating and assigning actions to buttons
7.	Button navigation
8.	A text button
9.	Buttons
10.	Buttons with button element
11.	CSS Button
12.	css rollover button
13.	Using Image to create a Button
14.	Button like right menu bar with mouse hover effect
15.	Change input form button style