57 buttons css fraNNNta-Design

Va prezentam 57 butoane web-design pentru forumurile voastre.

Button1 Button2 Button3 Button4 Button5 Button6 Button7 Button8 Button9 Button10 Button11 Button12 Button13 Button14 Button15 Button16 Button17 Button18 Button19 Button20 Button21 Button22 Button23 Button24 Button25 Button26 Button27 Button28 Button29 Button30 Button31 Button32 Button33 Button34 Button35 Button36 Button37 Button38 Button39 Button40 Button41 Button42 Button43 Button44 Button45 Button46 Button47 Button48 Button49 Button50 Button51 Button52 Button53 Button54 Button55 Button56 Button57

a.btn{
color: #fff;
text-decoration: none!important;
display: inline-block;
border: 1px solid #bbb;
border-radius: 3px;
min-width: 60px;
padding: 6px 10px;
font-size: 12px;
text-align: center;
margin: 2px;
font-family: arial;
}

#one{
color: #fff;
      background-color: #07c;
    border: 1px solid #005999;
    box-shadow: inset 0 1px 0 #3af;
}

#one:hover{
 
    background-color: #0095ff;
    border:1px solid #07c;
    box-shadow: inset 0 1px 0 #66bfff;
}
#unu{
color: #fff;
background: #512e1e;
border: 1px solid #381d11;
box-shadow: 0px 1px 0px #7f503b inset;
}

#unu:hover{
background: #633622;
box-shadow: 0px 1px 0px #af7156 inset;
}

#tho{
  color: #fff;
  background: #bc1212;
  border: 1px solid #930b0b;
  box-shadow: inset 0 1px 0 #ff4242;
  }
  
#two:hover{
background:#dd1313;
border: 1px solid #a30d0d;
box-shadow: 0px 1px 0px #ff6868 inset;
  }
  
  #doi{
  color: #fff;
  background: #9b3b11;
  border: 1px solid #702707;
  box-shadow: 0px 1px 0px #d36737
 inset;
 }
  #doi:hover{
  background: #b24513;
  box-shadow: 0px 1px 0px 
#fc8955 inset;
}
  #trei{
  color: #fff;
  background: #d64e11;
  border: 1px solid #a33708;
  box-shadow: 0px 1px 0px 
#f27a46
 inset;
  }
  
  #trei:hover{
  background: #f95e18;
  box-shadow: 0px 1px 0px #f99c72 inset;
  }
  
  #patru{
  color: #fff;
  background: #d6850c;
  border: 1px solid #a36406;
  box-shadow: inset 0px 1px 0px #f7b14a;
  
}

#patru:hover{
background: #e28b0b;
box-shadow: inset 0px 1px 0px #ffc166;

}

#cinci{
color: #fff;
background: #dbbf08;
border: 1px solid #a38e04;
box-shadow: inset 0px 1px 0px #f9e561;
}

#cinci:hover{
background: #eac20e;
}

#sase{
color: #fff;
background: #86bc07;
border: 1px solid #5e8403;
box-shadow: inset 0px 1px 0px #c4f948;

}

#sase:hover{
background: #8dc40b;
}

#sapte{
color: #fff;
background: #5aa527;
border: 1px solid #3f7a17;
box-shadow: 0px 1px 0px #9bef62 inset;
}

#sapte:hover{
background:  #64c124;
box-shadow: 0px 1px 0px #a5ff68 inset;
}

#opt{
color: #fff;
background: #378e26;
border: 1px solid #296d1c;
box-shadow: 0px 1px 0px #5cc647 inset;
}

#opt:hover{
background: #45b230;
box-shadow: 0px 1px 0px #77e562 inset;
border: 1px solid #348225;
}

#noua{
color: #fff;
background: #159b30;
border: 1px solid #097a20;
box-shadow: 0px 1px 0px #31d853 inset;
}
#noua:hover{
background: #16ba38;
box-shadow: 0px 1px 0px #4bfc70 inset;
}
#zece{
color: #fff;
background: #0daa5c;
border: 1px solid #058244;
box-shadow: 0px 1px 0px #50e59a inset;
}

#zece:hover{
background: #12bc67;
box-shadow: 0px 1px 0px #30f292 inset;
}

#unspe{
color: #fff;
background: #039b63;
border: 1px solid #017248;
box-shadow: 0px 1px 0px #2fefa8 inset;
}

#unspe:hover{
background: #05af71;
}

#doispe{
color: #fff;
background: #0c9b77;
border: 1px solid #058263;
box-shadow: 0px 1px 0px #2fd8ae inset;
}

#doispe:hover{
background: #06ad83;
}

#treispe{
color: #fff;
background: #02938a;
border: 1px solid #016d66;
box-shadow: 0px 1px 0px #3ac1b9 inset;
}

#treispe:hover{
background: #01a59b;
box-shadow: 0px 1px 0px #36e2d8 inset;
}
#paispe{
color: #fff;
background: #0592af;
border: 1px solid #017087;
box-shadow: 0px 1px 0px #32b5d1 inset;
}

#paispe:hover{
background: #019fbf;
box-shadow: 0px 1px 0px #36e2d8 inset;
}

#cincispe{
color: #fff;
background: #057eaf;
border: 1px solid #01668e;
box-shadow: 0px 1px 0px #2bb8f2 inset;
}

#cincispe:hover{
background: #058fc6;
}

#saispe{
color: #fff;
background:#055faf;
border: 1px solid #014989;
box-shadow: 0px 1px 0px #43a4f9 inset;
}

#saispe:hover{
background:#0871ce;
}

#saptispe{
color: #fff;
background: #0532af;
border: 1px solid #012382;
box-shadow: 0px 1px 0px #6188f4 inset;
}

#saptispe:hover{
background: #0c3fce;
}

#optispe{
color: #fff;
background: #0311a8;
border: 1px solid #000a77;
box-shadow: 0px 1px 0px #2a61ed inset;
}

#optispe:hover{
background: #0f20e2;
}

#nouaspe{
color: #fff;
background: #1703b2;
border: 1px solid #13005e;
box-shadow: 0px 1px 0px #4564ef inset;
}

#nouaspe:hover{
background: #1e14e5;
}

#douazeci{
color: #fff;
background: #2f00b2;
border: 1px solid #20007c;
box-shadow: 0px 1px 0px #663be2 inset;
}

#douazeci:hover{
background: #3907c6;
}

#douazeci1{
color: #fff;
background: #3e00b2;
border: 1px solid #30008c;
box-shadow: 0px 1px 0px #7c42ed inset;
}

#douazeci1:hover{
background: #4b06d1;
}

#douazeci2{
color: #fff;
background: #5000ad;
border: 1px solid #3f0089;
box-shadow: 0px 1px 0px #8930f2 inset;
}

#douazeci2:hover{
background: #6204d1;
}

#douazeci3{
color: #fff;
background: #7501c1;
border: 1px solid #530089;
box-shadow: 0px 1px 0px #ad35fc inset;
}

#douazeci3:hover{
background: #8704dd;
}

#douazeci4{
color: #fff;
background: #8001b2;
border: 1px solid #5d0082;
box-shadow: 0px 1px 0px #ad35fc inset;
}

#douazeci4:hover{
background: #9202cc;
}

#douazeci5{
color: #fff;
background: #9501b2;
border: 1px solid #6a017f;
box-shadow: 0px 1px 0px #d337f2 inset;
}

#douazeci5:hover{
background: #b106d3;
}

#douazeci6{
color: #fff;
background: #9e0377;
border: 1px solid #770159;
box-shadow: 0px 1px 0px #e830b9 inset;
}

#douazeci6:hover{
background: #bf0581;
}

#douazeci7{
color: #fff;
background: #a5004d;
border: 1px solid #7c003a;
box-shadow: 0px 1px 0px #e03585 inset;
}

#douazeci7:hover{
background: #c4035d;
}

#douazeci8{
color: #fff;
background: #aa003b;
border: 1px solid  #7c002b;
box-shadow: 0px 1px 0px #dd2c69 inset;
}

#douazeci8:hover{
background: #bc0343;
}

#douazeci9{
color: #fff;
background: #a80128;
border: 1px solid #7a001c;
box-shadow: 0px 1px 0px #d13055 inset;
}

#douazeci9:hover{
background: #c40330;
}

#treizeci{
color: #fff;
background: #a5001b;
border: 1px solid #820015;
box-shadow: 0px 1px 0px #e83754 inset;
}

#treizeci:hover{
background: #ba0120;
}

#treizeci1{
color: #fff;
background: #ad000b;
border: 1px solid #840008;
box-shadow: 0px 1px 0px #d63b45 inset;
}

#treizeci1:hover{
background: #bc030f;
}

#treizeci2{
color: #fff;
background: #bc030f;
border: 1px solid #8c0101;
box-shadow: 0px 1px 0px #e83c3c inset;
}

#treizeci2:hover{
background: #c60b0b;
}

#treizeci3{
background: #cc0e0e;
border: 1px solid #930101;
box-shadow: 0px 1px 0px #ed3636 inset;
}
 #treizeci3:hover{
 background: #e50d0d;
 }
 
 #treizeci4{
 background: #b70c0e;
 border: 1px solid #820701;
 box-shadow: 0px 1px 0px #d6342c inset;
 }
 
 #treizeci4:hover{
 background: #c10d03;
 }
 
 
 #treizeci5{
 background: #750d00;
 border: 1px solid #590900;
 box-shadow: 0px 1px 0px #c93626 inset;
 }
 
 #treizeci5:hover{
 background: #8e1002;
 }
 
 #treizeci6{
 background: #8e1002;
 border: 1px solid #750d00;
 box-shadow: 0px 1px 0px #c93626 inset;
 }
 
 #treizeci6:hover{
 background: #a81403;
 }
 
 #treizeci7{
 background: #d61702;
 border: 1px solid #b21100;
 box-shadow: 0px 1px 0px #ed4736 inset;
 }
 
 #treizeci7:hover{
 background: #dd1a06;
 }
 
 #treizeci8{
 background: #cc3702;
 border: 1px solid #a82c00;
 box-shadow: 0px 1px 0px #ef6332 inset;
 }
 
 #treizeci8:hover{
 background: #ea4309;
 }
 
 #treizeci9{
 background: #d16100;
 border: 1px solid #aa4f00;
 box-shadow: 0px 1px 0px #f4913a inset;
 }
 
 #treizeci9:hover{
 background: #e56d04;
 }
 
 #patruzeci{
 background: #d17900;
 border: 1px solid #ad6501;
 box-shadow: 0px 1px 0px #ffb349 inset;
 }
 
 #patruzeci:hover{
 background: #e28502;
 }
 
 #patruzeci1{
 background: #e59502;
 border: 1px solid #ba7800;
 box-shadow: 0px 1px 0px #f9b539 inset;
 }
 
 #patruzeci1:hover{
 background: #efa604;
 }
 
 #patruzeci2{
 background: #e2c800;
 border: 1px solid #c6b001;
 box-shadow: 0px 1px 0px #ffe942 inset;
 }
 
 #patruzeci2:hover{
 background: #ffe100;
 }
 
 #patruzeci3{
 background: #edd731;
 border: 1px solid #c4b127;
 box-shadow: 0px 1px 0px white inset;
 }
  
 #patruzeci3:hover{
 background: #ffe73d
 }
 
 #patruzeci4{
 background: #e2d578;
 border: 1px solid #b5aa5e;
 box-shadow: 0px 1px 0px white inset;
 }
 
 #patruzeci4:hover{
 background: #f7e988;
 }
 
 #patruzeci5{
 background: #e0d89f;
 border: 1px solid #bfb885;
 box-shadow: 0px 1px 0px white inset;
 }
 
 #patruzeci5:hover{
 background: #e2dba3;
 }
 
 #patruzeci6{
 background: #d8d8d8;
 border: 1px solid #adadad;
 box-shadow: 0px 1px 0px white inset;
 }
 
 #patruzeci6:hover{
 background: #e0e0e0;
 }
 
 #patruzeci7{
 background: #bcbcbc;
 border: 1px solid #a8a8a8;
 box-shadow: 0px 1px 0px #ddd inset;
 }
 
  #patruzeci7:hover{
 background: #c6c6c6;
 }
 
 #patruzeci8{
 background: #a8a8a8;
 border: 1px solid #a5a5a5;
 box-shadow: 0px 1px 0px #d1d1d1 inset;
 }
 
 #patruzeci8:hover{
 background: #b7b7b7;
 }
 
  
 #patruzeci9{
 background: #8e8d8d;
 border: 1px solid #7c7b7b;
 box-shadow: 0px 1px 0px #c6c6c6 inset;
 }
 
 #patruzeci9:hover{
 background: #969696;
 }
 #cincizeci{
 background: #6b6a6a;
 border: 1px solid #5b5b5b;
 box-shadow: 0px 1px 0px #a0a0a0 inset;
 }

#cincizeci:hover{
background: #707070;
}
 
 #cincizeci1{
 background: #4f4f4f;
 border: 1px solid #3a3a3a;
 box-shadow: 0px 1px 0px #727272 inset;
 }
 
 #cincizeci1:hover{
 background: #595959;
 }
 
 #cincizeci2{
 
 background: #3a3a3a;
 border: 1px solid #2d2d2d;
 box-shadow: 0px 1px 0px #636363 inset;
 }
 
 #cincizeci2:hover{
 background: #424242;
 }
 
 #cincizeci3{
 background: #303030;
 border: 1px solid #232323;
 box-shadow: 0px 1px 0px #636363 inset;
 }
 
 
#cincizeci3:hover{
background: #3d3d3d;
}
 
 #cincizeci4{
 background: #212121;
 border: 1px solid #141414;
 box-shadow: 0px 1px 0px #606060 inset;
 }
 
 #cincizeci4:hover{
 background: #282828;
 }
 
 #cincizeci5{
 background: #1e1e1e;
 border: 1px solid #070707;
 box-shadow: 0px 1px 0px #555 inset;
 }
 
 #cincizeci5:hover{
 background: #242424;
 }
 
 #cincizeci6{
 background: #141414;
 border: 1px solid #000;
 box-shadow: 0px 1px 0px #444 inset
 }

#cincizeci6:hover{
background: #181818;
}

#cincizeci7{
background: #060606;
border: 1px solid #000;
box-shadow: 0px 1px 0px #333 inset;
}

#cincizeci7:hover{
background:#141414;
      }