AcasaAcasa  CalendarCalendar  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  

Distribuiţi | 
 

 Buton Box

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Admin
Administrator
Administrator
avatar

Mesaje : 194

Credite : 582

Reputatie : 0

Data de inscriere : 15/08/2011

Varsta : 21

Localizare : Navodari

Hobby : CS, Afara.. Fete..

Arma Preferata : Ak-47


MesajSubiect: Buton Box   Joi Aug 18, 2011 6:50 am

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>
Sus In jos
Vezi profilul utilizatorului http://cstrike-zone.wikiforum.ro
 

Buton Box

Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Tutoriale :: Coduri / Scripturi :: Coduri HTML-
Forumgratuit.ro | ©phpBB | Forum gratuit de suport | Semnaleaza un abuz | Creeaza un blog
@ Parteneri