Cara Menciptakan Tombol Download Coloured

Coloured Buttons - Warna yaitu Suatu bentuk masing-masing yang mempunyai intensitas, corak, dan nada . Warna menyebabkan sebuah tampilan menjadi menarik dan indah . Tampilan tombol menjadi lebih menarik kalau kita padukan dengan warna .

Demo   CODE

Pada tombol Download ini mempunyai effect hover dikala mouse di letakkan di atas tombol . Untuk membuatnya berikut ini caranya :

Pertama pemasngan pada tombol CSS , Anda copy code dibawah ini dan pastekan diatas instruksi kode ]]></b:skin>

/*Coloured Buttons */
.grid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}

.col {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    vertical-align: top;
}

.col-1,
 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

div.grey{
 background: #EDEDEB;
}

div.white{
 background: #F4F5F0;
}

div.dark-grey{
 background: #4C4D4B;
}

div.green{
 background: #5CB86E;
}

.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
  color: #666666;
  border: 2px #666666 solid;
  outline: none;
}

button:hover{
 color: #ffffff;
 background-color: #666666;
}

.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
 background-color: #9b59b6;
}

.orange {
 color: #e67e22;
 border: 2px #e67e22 solid;
}

.orange:hover {
 background-color: #e67e22;
}

.yellow {
 color: #f1c40f;
 border: 2px #f1c40f solid;
}

.yellow:hover {
 background-color: #f1c40f;
}

Selanjutnya pemasangan HTML , salin instruksi dibawah ini dan terapakan pada Mode HTML

<div class="grid">
<div class="col-1">
<h3>Coloured Buttons</h3>
<button>default</button>
<button class="blue">blue</button>
<button class="green">green</button>
<button class="red">red</button>
<button class="purple">purple</button>
<button class="orange">orange</button>
<button class="yellow">yellow</button>
</div>

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/