Keresés az erőforrások között
Flat UI gombok

Flat UI gombok

Modern, Flat UI gombok a weboldaladra!
AdamS2015-08-21 18:32:17 540

Demo

Modern, Flat UI gombok a weboldaladra!

A Stílusok táblázata (CSS) sablon végére:

Kód

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);  

input[type="button"] {  
  background:#1abc9c;  
  font-family: 'Roboto Condensed', sans-serif;  
  padding:13px;  
  border:none;  
  border-radius:8px;  
  transition-duration:0.4s;  
  margin:10px;  
  color:#ecf0f1;  
  text-transform:uppercase;  
  cursor:pointer;  
}  

input[type="button"]:hover {  
  opacity:0.8;  
}  

input[type="button"].turquoise {  
  background:#1abc9c;  
}  

input[type="button"].emerald {  
  background:#2ecc71;  
}  

input[type="button"].peterriver {  
  background:#3498db;  
}  

input[type="button"].amethyst {  
  background:#9b59b6;  
}  

input[type="button"].wetasphalt {  
  background:#34495e;  
}  

input[type="button"].greensea {  
  background:#16a085;  
}  

input[type="button"].nephirits {  
  background:#27ae60;  
}  

input[type="button"].belizehole {  
  background:#2980b9;  
}  

input[type="button"].wisteria {  
  background:#8e44ad;  
}  

input[type="button"].midnightblue {  
  background:#2c3e50;  
}  

input[type="button"].sunflower {  
  background:#f1c40f;  
}  

input[type="button"].carrot {  
  background:#e67e22;  
}  

input[type="button"].alizarin {  
  background:#e74c3c;  
}  

input[type="button"].clouds {  
  background:#ecf0f1;  
  color:#bdc3c7;  
}  

input[type="button"].concrete {  
  background:#95a5a6;  
}  

input[type="button"].orange {  
  background:#f39c12;  
}  

input[type="button"].pumpkin {  
  background:#d35400;  
}  

input[type="button"].pomegranate {  
  background:#c0392b;  
}  

input[type="button"].silver {  
  background:#bdc3c7;  
}  

input[type="button"].asbestos {  
  background:#7f8c8d;  
}


Ahol a gombokat akarod látni:

Kód

<input class="turquoise" type="button" value="button">  

<input class="emerald" type="button" value="button">  

<input class="peterriver" type="button" value="button">  

<input class="amethyst" type="button" value="button">  

<input class="wetasphalt" type="button" value="button">  

</br>  

<input class="greensea" type="button" value="button">  

<input class="nephirits" type="button" value="button">  

<input class="belizehole" type="button" value="button">  

<input class="wisteria" type="button" value="button">  

<input class="midnightblue" type="button" value="button">  

</br>  

<input class="sunflower" type="button" value="button">  

<input class="carrot" type="button" value="button">  

<input class="alizarin" type="button" value="button">  

<input class="clouds" type="button" value="button">  

<input class="concrete" type="button" value="button">  

</br>  

<input class="orange" type="button" value="button">  

<input class="pumpkin" type="button" value="button">  

<input class="pomegranate" type="button" value="button">  

<input class="silver" type="button" value="button">  

<input class="asbestos" type="button" value="button">


Innen kiválasztod, melyik szín kell neked, és felhasználod azt.

Hozzászólások (0)

A hozzászólási lehetőség ideiglenesen kikapcsolva