Buton Box cu efect

Buton Box Extrem Tutorials

DEMO: http://www.extrem-tutorials.com/h40-buton


Pasul 1 : Adaugam urmatorul cod in foaia de stil css

Cod:

.buton { color: #fff; padding: 8px 14px 10px; background-color: #bc1815; border: none; margin-right: 25px; position: relative;;
      -webkit-user-select: none;
      -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
      box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
      -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
          }
   .buton:active { position: relative; top: 3px;
       -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
       -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
       box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
   }
   .buton:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }
 
   
   .buton.blue { background: #22C3EB; }
   .buton.green { background: #67b600; }
   .buton.orange { background: #da8a00; }
   .buton.yellow { background: #b3a400; }
   .buton.turquoise { background: #00b1af; }
   
   .buton:last-of-type { margin: 0; }
 
   .buton.gradient {
      background-image: -webkit-gradient(
         linear,
         left bottom,
         left top,
         color-stop(0.1, rgba(0,0,0,0.3)),
         color-stop(1, rgba(255,255,255,0.2))
      );
      background-image: -moz-linear-gradient(
         center bottom,
         rgba(0,0,0,0.3) 1%,
         rgba(255,255,255,0.2) 100%
      );
      background-image: gradient(
         center bottom,
         rgba(0,0,0,0.3) 1%,
         rgba(255,255,255,0.2) 100%
      );
   }
   
   .button.gradient:hover {
      background-image: -webkit-gradient(
         linear,
         left bottom,
         left top,
         color-stop(0.1, rgba(0,0,0,0.45)),
         color-stop(1, rgba(255,255,255,0.3))
      );
      background-image: -moz-linear-gradient(
         center bottom,
         rgba(0,0,0,0.45) 1%,
         rgba(255,255,255,0.3) 100%
      );
      background-image: gradient(
         center bottom,
         rgba(0,0,0,0.45) 1%,
         rgba(255,255,255,0.3) 100%
      );
   }

Pasul 2: Adaugam in orce zona pe forum codurile dorite

Cod:

<a href="#" class="buton">Buton 1</a
<a href="#" class="buton blue">Buton 2</a> 
<a href="#" class="buton green">Buton 3</a>
<a href="#" class="buton orange">Buton 4</a>
<a href="#" class="buton yellow">Buton 5</a>
<a href="#" class="buton turquoise">Buton 6</a>


CU Gradient

Cod:

<a href="#" class="buton gradient">Buton 1!</a>
<a href="#" class="buton blue gradient">Buton 2</a>
<a href="#" class="buton green gradient">Buton 3</a>
<a href="#" class="buton orange gradient">Buton 4</a>
<a href="#" class="buton yellow gradient">Buton 5</a>
 <a href="#" class="buton gradient">Buton 6</a>

Sal porti sanatos Vizitator