Karya-Reza

Mengerti Kebutuhan Pengunjung

Select Menu
  • Home
  • Seputar Dunia Blogging
  • Template Untuk Blog
  • Widget Blog
  • Dan Lainnya
    • Tukar Link !
    • Daftar Banner Yang Sudah Tukar Link
  • Error Page
Home » Widget Blogging » Cara Membuat Tombol 3 Dimensi Dengan CSS

Wednesday, August 13, 2014

Cara Membuat Tombol 3 Dimensi Dengan CSS

Reza Syahputra Rizal
23 Comments
Widget Blogging
Wednesday, August 13, 2014
Cara Membuat Tombol 3 Dimensi Dengan CSS - Membuat Tombol Pasti Diperlukan Apa
Itu Untuk Widget Post Atau Untuk Mempercantik Blog , Tetapi Tombol Yang Sering
Dipake Ialah Tombol Untuk Download Yang tentunya sering dipake untuk Niche Download
Jika Anda adalah orang yang mempunya Blog ber-Niche download mungkin Cara Membuat
Tombol 3 Dimensi Dengan CSS
Ini Bisa Jadi Pilihan Anda

Langkah Pembuatan :

1. Silahkan Anda Cari Kode ]]></b:skin> Di Blog Anda

2. Silahkan Taruh CSS Dibawah Ini Diatas Kode Tersebut
 .button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}
3. Untuk Pengaturan Silahkan Masukan Kode Dibawah Ini Di HTML Anda Bukan Compose
 <a class='button3' href='#'>Tombol 3 Dimensi</a>a

Share

Like

G+

Tweet

Tweet
23 Komentar untuk "Cara Membuat Tombol 3 Dimensi Dengan CSS"

Berkomentarlah Sesuai Isi Artikel Diatas :)

Klik Untuk Komentar
Unknown
Balas
Unknown August 13, 2014 at 3:14 AM
delete

Ini bikin berat blog gak gan? Takut install macem2 ntr blog berat
Thx 4 sharing

Robby
Balas
Robby August 13, 2014 at 1:30 PM
delete

keren sob

Unknown
Balas
Unknown August 13, 2014 at 9:52 PM
delete

makasih gan infonya, sangat membantu.. :D

kangazis
Balas
kangazis August 13, 2014 at 9:57 PM
delete

ternyata mudah ga, lagi nyari buat tombol download, thanks bro

Satriyo76
Balas
Satriyo76 August 13, 2014 at 10:00 PM
delete

Mantap kalo pake css..ijin nyoba bro..buat tombol download ane..

Nugraha Alvitto
Balas
Nugraha Alvitto August 13, 2014 at 10:37 PM
delete

gan itu kode yang kedua taronya dmn ?

Anonymous
Balas
Anonymous August 13, 2014 at 10:42 PM
delete

Buat tombol download juga bisa ya mas ?? :v

Unknown
Balas
Unknown August 13, 2014 at 10:44 PM
delete

keren an. tapi kalo pengen warnanya abu2 gelap, mananya yang yang di ganti ga..?

Unknown
Balas
Unknown August 13, 2014 at 10:50 PM
delete

wah mantap nih

Unknown
Balas
Unknown August 13, 2014 at 11:03 PM
delete

Ohh gtu yaa gan, izin coba yaa

my
Balas
my August 13, 2014 at 11:07 PM
delete

itu caranya bikin persegi dalamnya kode itu gimana,gan?

Unknown
Balas
Unknown August 13, 2014 at 11:37 PM
delete

Ini CSS brp?.ajarin ane css nya gan :(

Marwanto606
Balas
Marwanto606 August 14, 2014 at 12:04 AM
delete

siph gan ijiin tes di blog ane..

Tofa Maulana Irvan
Balas
Tofa Maulana Irvan August 14, 2014 at 12:06 AM
delete

wah bermanfaat nih gan , demo dan download blog saya belum dimodifikasi skalian aje dah saya pakai :D

Febrian
Balas
Febrian August 14, 2014 at 12:45 AM
delete

kalau ada demo lebih keren mas...

Unknown
Balas
Unknown August 14, 2014 at 12:58 AM
delete

tutorial bagus,ditunggu tutorial selanjutnya ya min

Unknown
Balas
Unknown August 14, 2014 at 2:23 AM
delete

wah kren nih gan ane coba ah..,

Unknown
Balas
Unknown August 14, 2014 at 2:29 AM
delete

izin bookmark source code nya gan.. Sewaktu-waktu bisa saya pake nih. :)
Keep share!

Unknown
Balas
Unknown August 14, 2014 at 2:32 AM
delete

mungkin cantik untuk blog sya gan..ijin coba ya
dan mohom bimbingannnya ya
newbie

Unknown
Balas
Unknown August 14, 2014 at 4:39 AM
delete

Wahh,, pgen dipasang tapi koneksi lagi lemot nih

Unknown
Balas
Unknown August 14, 2014 at 5:48 AM
delete

keren gan, makasih infonya

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal August 14, 2014 at 11:53 PM
delete

Gk Akan Gan , Asalkan Blog Anda Tidak Dibuat berat oleh Widget-Widget Di Blog
Tidak akan berat Pasti

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal August 14, 2014 at 11:53 PM
delete

Ok Gan , Sama-Sama

Berkomentarlah Sesuai Isi Artikel Diatas :)

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Contact Me !

  • Semua Niche

    Popular Posts

    • Membuat Navigasi Halaman Dengan Keyboard
    • Template Ramai Blogger !
    • Cara Membuat Tombol 3 Dimensi Dengan CSS
    • FND Blogger Template
    • Keren! Membuat Spoiler Dengan JavaScript
    • Memodifikasi Tampilan Demo Dan Download
    • Cara Membuat Widget Sosial Media Lengkap
    • Cara Membuat Tombol Back To Top Dengan Efek Bounce Ala Kang Ismet
    • Cara Membuat Navigasi CSS3 Sohtanaka

    Berlangganan

    Dapatkan Informasi Dari Blog Karya-Reza Melalui Email

    Follow blog

    Subscribe To

    Posts
    Atom
    Posts
    Comments
    Atom
    Comments

    About Me

    Reza Syahputra Rizal
    View my complete profile

    © 2025 Karya-Reza Published By Karya-Reza powered by Blogger.com.
    All Right Reserved By Blog Dian Anarchyta.