<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Színátmenetes gombok</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-11-15" />
      <meta name="revised" content="Tóth Péter, 15/11/2012" />
      <meta name="description" content="CSS3 - Színátmenetes gombok" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         body {
            background: #F9F9F9;
            font: Arial,sans-serif;
            }
         h2 {
            padding-top:10px;
            clear:both;
            color:#2E6BA8;
            font-weight:normal;
            text-decoration:none;
            }
         /* A gombok elhelyezkedése */
         #demo {
            background: #fff;
            border: 1px #ccc solid;
            width: 730px;
            height:240px;
            margin: 0 auto;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 10px 15px;
            -moz-box-shadow: 0 0 6px rgba(0,0,0,.1);
            -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
            box-shadow: 0 0 6px rgba(0,0,0,.1);
            position: relative;
            }
         /* Gombok */
         .menucsop li {
            display: block;
            float: left;
            line-height: 35px;
            list-style:none;
            margin: 0 5px;
            }
         .menucsop li a {
            /* This generators the gradient on top of the solid color */
            background-image: -webkit-gradient(
               linear,
               left top,
               left bottom,
               color-stop(0, rgba(255,255,255,.5)),
               color-stop(1, rgba(0,0,0,.1))
               );
            background-image: -moz-linear-gradient(
               center top,
               rgba(255,255,255,.5) 0%,
               rgba(0,0,0,.1) 100%
               );
            color: rgba(255, 255, 255, 0.8);
            display: block;
            font: bold 18px Arial,sans-serif;
            outline:none;
            padding: 5px 15px;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
            -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
            -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
            }
         .menucsop li a:active {
            background-image: -webkit-gradient(
               linear,
               left bottom,
               left top,
               color-stop(0,rgba(255,255,255,.5)),
               color-stop(.1,rgba(255,255,255,.2)),
               color-stop(.85, rgba(0,0,0,.2)),
               color-stop(100, rgba(0,0,0,.4))
               );
            background-image: -moz-linear-gradient(
               center bottom,
               rgba(255,255,255,.5) 0%,
               rgba(255,255,255,.2) 10%,
               rgba(0,0,0,.2) 85%,
               rgba(0,0,0,.4) 100%
               );
            }
         /* Sötét szöveg a gombon */
         .menucsop li a.dark {
            color: rgba(0, 0, 0, 0.8);
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
            }
         /* Az egyes színek definiálása */
         .red {
            background: #B80202;
            border: #B80202 1px solid
            }
         .red:hover, .red:focus{
            background-color:#e30606
            }
         .green {
            background: #46c431;
            border: #46c431 1px solid
            }
         .green:hover,.green:focus {
            background-color:#44e329
            }
         .yellow {
            background: #D9CE1C;
            border: #D9CE1C 1px solid
            }
         .yellow:hover,.yellow:focus {
            background-color:#eee117
            }
         .cyan {
            background: #23c6de;
            border: #23c6de 1px solid
            }
         .cyan:hover,.cyan:focus {
            background-color:#18d8f4
            }
         .blue {
            background: #3271d9;
            border: #3271d9 1px solid
            }
         .blue:hover,.blue:focus {
            background-color:#377ef2
            }
      </style>
   </head>
   <body>
      <div id="demo">
         <h2>Világos szöveg</h2>
         <ul class="menucsop">
            <li><a href="#" class="red">Szép link</a></li>
            <li><a href="#" class="green">Még szebb link</a></li>
            <li><a href="#" class="yellow">További kód</a></li>
            <li><a href="#" class="cyan">Még több CSS3</a></li>
            <li><a href="#" class="blue">Link</a></li>
         </ul>
         <h2>Sötét szöveg</h2>
         <ul class="menucsop">
            <li><a href="#" class="red dark">Szép link</a></li>
            <li><a href="#" class="green dark">Még szebb link</a></li>
            <li><a href="#" class="yellow dark">További kód</a></li>
            <li><a href="#" class="cyan dark">Még több CSS3</a></li>
            <li><a href="#" class="blue dark">Link</a></li>
         </ul>
      </div>
   </body>
</html>