Beautifful Button

Beautifful Botton - Button adalah sebuah kontrol yang tampil pada layar dengan bentuk tertentu yang mirip dengan tombol persegi panjang dengan tulisan di tengahnya. Ketika pengguna menggerakkan kursor di atas sebuah button, maka button tersebut akan aktif, biasanya ditandai dengan perubahan warna, ukuran, atau bentuk button. Jika button tersebut di-klik, maka aplikasi akan menjalankan sebuah aksi seperti yang telah dijelaskan pada tulisan nama button tersebut. Aksi oleh button biasanya dijalankan secara instan. Contoh button banyak terdapat pada menu atau kotak dialog yang biasanya mencakup penyelesaian operasi yang didefinisikan oleh judul kotak dialog tersebut.

button, beautifful button, button cantik


Kali ini Kolom Tutorial™ akan menyajikan kepada sobat bloger bagaimana pembuatan salah satu Button yang menurut saya sangat menarik, Button ini tampilannya sederhana namun elegant. untuk previewnya sobat bisa lihat pada  kolom DEMO dan Pada gambar diatas.

Langkah penerapannya :-

Untuk panduan pemasangan widget silakan klik DISINI

UNTUK KODE HTML NYA
 <div class="container">
    <a href="index.html" class="button">Submit</a>
    <a href="index.html" class="button button-green">Submit</a>
    <a href="index.html" class="button button-red">Submit</a>
  </div>

UNTUK KODE CSS NYA
.container {
  width: 550px;
  margin: 70px auto;
  text-align: center;
}
.container > .button {
  margin: 0 10px;
}

.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  min-width: 96px;
  line-height: 46px;
  padding: 0 24px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px #154c86;
  background-color: #247edd;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #1c65b2 #18589c #18589c;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
}
.button:before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -20%;
  right: -20%;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
}
.button:hover {
  background-color: #1a74d3;
}
.button:active {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 -1px #154c86;
  background: #1f71c8;
  border-color: #113f70 #154c86 #1c65b2;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
}
.button:active:before {
  top: -50%;
  bottom: -125%;
  left: -15%;
  right: -15%;
  -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
}

.button-green {
  text-shadow: 0 1px #0d4d09;
  background-color: #1ca913;
  border-color: #147b0e #11640b #11640b;
}
.button-green:hover {
  background-color: #159b0d;
}
.button-green:active {
  text-shadow: 0 -1px #0d4d09;
  background: #189210;
  border-color: #093606 #0d4d09 #147b0e;
  background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
  background-image: -moz-linear-gradient(top, #126d0c, #20c016);
  background-image: -o-linear-gradient(top, #126d0c, #20c016);
  background-image: linear-gradient(to bottom, #126d0c, #20c016);
}

.button-red {
  text-shadow: 0 1px #72100d;
  background-color: #cd1d18;
  border-color: #9f1713 #891310 #891310;
}
.button-red:hover {
  background-color: #c01511;
}
.button-red:active {
  text-shadow: 0 -1px #72100d;
  background: #b61a15;
  border-color: #5b0d0b #72100d #9f1713;
  background-image: -webkit-linear-gradient(top, #921511, #e4201b);
  background-image: -moz-linear-gradient(top, #921511, #e4201b);
  background-image: -o-linear-gradient(top, #921511, #e4201b);
  background-image: linear-gradient(to bottom, #921511, #e4201b);
}

Demikian Artikel kali ini semoga bermanfaat dan salam Blogger

Berlangganan update artikel terbaru via email:

26 Responses to "Beautifful Button"

  1. makin cantik nih buttonnya mas, secantik siapa ya?? hehehe..
    panduan untuk penerapannya sangat lengkap dan mudah dipahami, praktis untuk dipelajari mas.
    tutorial yang sempurna, dan terimakasih udah berbagi :D

    kemana ajah nih bang alex lama tak jumpa

    ReplyDelete
    Replies
    1. Terimakasih banyak mas, biasa mas ada kesibukan dikerjaan. terimakasih banyak atas kunjungannya, mas

      Delete
    2. secantik sang pujaan dong pastinya...hehehe :)

      Delete
  2. Keren banget tuh mas Alex... kapan-kapan akan saya coba, makasih banyak buat tutorialnya mengenai tombol kerennya :)

    ReplyDelete
  3. Dapet ilmu baru lagi nih dari bang Alex,keren bro and mantappp

    ReplyDelete
  4. Benar2 beautiful nih Bang Alex buttonnya. Ijin simpan ya Bang..

    ReplyDelete
    Replies
    1. jangan disimpan saja mas Boku,nanti lumer loh haha

      Delete
  5. Keren banget ms hasilnya sesuai dengan namanya ,,,mantab dh

    ReplyDelete
  6. keren mas alex....langkah sama panduannya dah tersaji lengkappp banget....ndak bisa bilang apa apa lagi deh..."Sempurna"
    hehe :)

    ReplyDelete
  7. tutorialnya sangat berguna sekali sobat, bisa menambah pengetahuan baru buat saya
    terima kasih banyak sudah berbagi

    ReplyDelete
  8. sangat membantu saya untuk mempelajarinya sobat
    terima kasih

    ReplyDelete
  9. mantap kang... mamang mau pasang tapi belum berani kutak katiknya, belum paham

    ReplyDelete
  10. keren kang mantapzzzz ...
    apalagi ketika menatapnya penuh dengan senyuman dan segelas kopi item hehe

    ReplyDelete
  11. Hadir lagi Bang Alex.., Happy Blogging..!

    ReplyDelete
  12. buttonnya memang bener2 cantik, tutornya canggih siip

    ReplyDelete
  13. kren banget mas .. cocok banget tuh buat template yang penuh warna , sayang templateku sederhana

    ReplyDelete
  14. simple banget tutornya :D
    btw blognya keren tapi kenceng gan, bagus blognya :D

    ReplyDelete
  15. mantep bang, oh iya bang itu jquery ditemplate bang joens banyak banget kan 1 aja udah cukup jquerynya

    ReplyDelete
    Replies
    1. iya mas ane lupa nyabut bekas percobaan-percobaan, terimakasih banyak mas infonya.

      Delete
  16. Sasuai jeung namanya kang Joen (beautiful button), meni gareulis button2-nyah hehehe.
    Hatur nuhun kang.

    ReplyDelete
  17. cocok banget tuh buat template yang penuh warna

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel