Css menu maker button set tutorial

pada kesempatan kali ini saya akan mencoba membagikan beberapa tombol "button" yang saya dapatkan dari ccsmenumaker. fungsi darisebuah tombol itu sendiri sangatlah beragam seperti membuat hyerlink dan lain sebagainya tanpa perlu berpanjang lebar berikut demonstrasinya:

view demo

untuk membuat tombol-tombol "button" seperti di atas besiknya anda hanya memerlukan makrup seperti:

<a href="#" class="cssmenumakerbuttonset">Button</a>

Atau

<button class="cssmenumakerbuttonset">Button</Button>

CSS

/* CSS Button Set */
.cssmenumakerbuttonset {
  background: #CCC;
  color: #FFF;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  line-height: 2.5em;
  padding: 0 3em;
  text-decoration: none;
}

/* States */
.cssmenumakerbuttonset:hover {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
  inset 0 1.5em 1em rgba(255,255,255,0.3);
}

.cssmenumakerbuttonset:active {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
  inset 0 1.5em 1em rgba(0,0,0,0.3);
}

Pertinjau

Button

Mengubah Ukuran Button

tentunya dengan begitu tidaklah cukup. anda hanya mendapatkan beberapa buah tombol dengan ukuran yang sama. laalu bagaimana mengubah ukurannya?

tambahkan CCS berikut ini :

/* Size */
.small.cssmenumakerbuttonset {
  line-height: 1.75em;
  padding: 0 1.5em;
}

.large.cssmenumakerbuttonset {
  line-height: 3em;
  padding: 0 3.5em;
}

dan dengan sedikit penambahan seperti itu anda sudah mengubah ukuran tombol-tombol tersebut menjadi seperti

Pertinjau:

Pewarnaan

penambahan untuk membuat tombol-tombol tersebut berwarna dilakukan hanya dengan menambahkan class="(warna) (ukuran) cssmenumakerbuttonset" Seperti pada contoh makrup:

<button class="green small cssmenumakerbuttonset">Button</button>
<button class="red cssmenumakerbuttonset">Button</button>
<button class="blue large cssmenumakerbuttonset">Button</button>

lalu tambahkan css

/* Colors */
.green.cssmenumakerbuttonset {
  background: linear-gradient(#6BDB55,#57B245);
  text-shadow: 1px 1px 1px #57B245;
}

.red.cssmenumakerbuttonset {
  background: linear-gradient(#D60A0A,#B20808);
  text-shadow: 1px 1px 1px #B20808;
}

.blue.cssmenumakerbuttonset {
  background: linear-gradient(#11A1D6,#0E86B2);
  text-shadow: 1px 1px 1px #0E86B2;
}

dengan itu anda sudah dapat melihat beberapa buah tombol berwarna-warni seperti yang dapat anada lihat

Pertinjau:

Demikian shareing saya tentang beberapa tombol "button" yang mungkin akan dapat membantu anda. saya berharap agar tombol-tombol "button" tersebut dapat bermanfaat. terimakasih kunjungannya, see you!!!

view demo