Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

css3 Buttons: Cara membuat Button Keren dg CSS3

Selama ini bentuk dan rupa button hanyalah dalam bentuk yang itu-itu saja dan kadang melihatnya terasa sangat membosankan. Kini bentuk usang dan kuno button akan semakin ditinggalkan oleh pengguna blog. Desain butoon yang lebih inovatif mampu dikembangkan dengan berbagai pengembangan melalui css3 dengan berbagai bentuk dan variasinya. Untuk menciptakan button yang lebih menarik kita bisa gunakan background image, background color, text-shadow, box-shadow, border-radius, opacity-effects, blik effects, berbagai jenis dan ukuran serta warna font serta beberapa penambahan kode css yang lain. Beberapa contoh berikut hanyalah sebagian dari css3 button yang telah aku buat dan mungkin akan bermanfaat bagi kita :


css3 buttons

Buttons-1



buttons-2



buttons-3





buttons-4



button-5





buttons lain











Cara membuat css3 buttons


Kode css css3 buttons

Kode CSS :
.bt1{
       background-color:#C0C0C0;
       border:1px solid #A9A9A9;
       border-radius:5px;
       margin:1px;
       padding:3px 3px;
       box-shadow:0px 1px 2px #696969;
       color:white;
       font-size:11px;
       font-weight:bold;
       letter-spacing:0px;
       text-shadow:0px 1px 2px black;
}
.bt1:hover{color:#CCFF00;background:#333399;}
.bt2{
       background:#4682B4 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-1V5H5.gif);
       border-radius: 10px 9px;
       border: 1px solid #99CCCC; 
       margin: 5px;
       padding: 4px 10px 2px 10px;
       min-width: 115px;
       color: white;
       font-family: helvetica, arial, sans-serif;
       font-size: 11px;
       font-weight: bold;
       letter-spacing: 0px;
       word-spacing: 0px;
       text-align: center;
       text-shadow: 0px 0px 0px black;
}
.bt2:hover{color:#FF0000;background:#333;} 
.bt3{ 
       background:white;
       border:1px solid #FF8C00;
       border-radius:9px;
       padding: 6px 8px 4px 8px;
       color:black;
       font-family:Arial;
       font-size: 10px;
       font-weight:bold;
       letter-spacing: -1px;
       font-style: italic;
       text-transform: uppercase;
       text-align: left;
}
.bt3:hover{background:#FF8C00;}
.bt4{
       background:#4b1701;
       border:1px solid #d8dada;
       border-radius:11px;
       margin:1px;
       padding:1px 8px 3px;
       box-shadow:1px 1px 3px #a1d7fd;
       color:#0101ff;
       font-size: 12px;
       font-family:Times New Roman;
       font-weight: bold;
       letter-spacing: 0px;
       text-shadow: 0px 1px 1px #FFCC33;
}
.bt5{
       background:#336666 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-2H15V25.png) center repeat;
       border:1px solid #33CC99;
       border-radius:10px;
       margin:1px;
       padding:2px 6px 4px;
       box-shadow:1px 1px 2px #333;
       color:#0000FF;
       font-size:12px;
       font-family:Cursive;
       font-weight:bold;
       letter-spacing:0px;
       text-shadow: 0px 1px 1px #FFCC33;
}
.bt5:hover{color:#6CF;text-shadow:1px 1px 1px #000;background:url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-3V31H33.gif);}   
.bt4:hover{color:red;background:#CCCCCC;}
.bt1,.bt2,.bt3,.bt4,.bt5,.btst1,.btst2,.btst3{
       cursor:pointer;
       transition:0.8s;
       -o-transition:0.8s;
       -moz-transition:0.8s;
       -webkit-transition:0.8s;
       -ms-transition:0.8s;
}
a#GRbt,a.GRbt,a#GRbt:hover,a.GRbt:hover{text-decoration:none;}
.btst1{background:#FF8C00;text-transform:capitalize;}
.btst2{background:#996600;text-decoration:blink;}
.btst3{background:#FF0000;font-family:Verdana;}

Langkah penggunaan css3 buttons
  1. Simpan kode css di atas kode ]]></b:skin> di halaman Edit HTML.
  2. Untuk sampai di halaman Edit HTML, lakukan :

    - Login ke BloGGer
    - Dasboard --> KLIK Design/Rancangan
    - Design/Rancangan --> KLIK Edit HTML
    - Cari Kode ]]></b:skin>, kemudian letakkan kode css3 buttons persis di atasnya.
    - Kode CSS juga bisa di upload di file hosting (google sites atau google code), kemudian link kode cssnya di simpan di atas kode </head> .

    Bentuk pemasangannya seperti ini :

    <link href="button-keren.css" rel="stylesheet" type="text/css" media="screen" />
    
    </head>

    - KLIK SAVE/Simpan Template.
Penggunaan kode HTML css3-buttons di halaman posting atau yang lain

xHTML :
<button class="bt1">Button text</button>

<button class="bt2">Button text</button>

<button class="bt3">Button text</button>

<button class="bt4">Button text</button>

<button class="bt5">Button text</button>

<button class="bt1">Button text</button>

Untuk model lain gunakan tambahan kode ini

xHTML :
<button class="bt1 GRbt1">Button text</button>

<button class="bt1 GRbt2">Button text</button>

<button class="bt1 GRbt3">Button text</button>

Lakukan juga untuk button 2, 3, 4 dan 5, seperti kode berikut :

xHTML :
<button class="bt2 GRbt2">Button text</button>

<button class="bt3 GRbt2">Button text</button>

<button class="bt4 GRbt2">Button text</button>

<button class="bt5 GRbt2">Button text</button>

Cara menggunakan Button CSS3 dalam sebuah link

Tambahkan tag a dengan class atau id GRbt baru kemudian tag button berada di dalamnya. Lihat contoh berikut:

<a id="GRbt" href="Your URL here" title="Your title here"><button class="bt1">Button Text</button></a>

Atau seperti ini :

<a class="GRbt" href="Your URL here" title="Your title here"><button class="bt1">Button Text</button></a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PON, Maret, 05, 2012

» Happy Blogging - gubhugreyot «

10 komentar:

  1. Terima Kasih Pak,ini tutorial yang cukup membuat postingan saya tambah cantik.

    BalasHapus
  2. maaf mahu tanya bagai mana nak buat macam punya boss ya... bila couser mouse sentuh je kat table tu kuat box pastu terbang hilang..

    BalasHapus
  3. mantap mas toturialnya.gue suka bnget? skrip klau kita klik link ikuti kotak gmna skripnya mas? tlng ya

    BalasHapus
  4. terima kasih atas infonya

    BalasHapus
  5. bookmark dulu ah, keren banget ini blog isi dan tampilan postingannya

    BalasHapus
  6. ane coba masukkan link di setiap tombol, tapi kok gak berfungsi? kenapa ya..?! Tittle berfungsi cuma ketika diklik tetap aja ga keluar ke link tautan ane... mohon penjelasan Pak..! Thanks before..!!

    BalasHapus
  7. Pro :Islamic, Fun and Happy

    Silahkan baca lagi tutorialnya. Keterangan cara menggunakan sebagai link sudah ditambah. Update sdh dilakukan hari ini!

    Salam ...

    gubhugreyot

    BalasHapus
  8. keren gan,kapan2 mau cb yah. (Siput)

    BalasHapus
  9. Gan Tolong dong tutorial Blog Arsip Seperti punya agan.....
    tombolnya lentur gt!!!!

    BalasHapus

 
GR | Edited by | gubhug reyot