Cara Membuat Tombol 3D Yang Keren

Cara Membuat Tombol 3D Yang Keren

Cara Membuat Tombol 3D Yang Keren

Tuesday, March 4, 2014

Cara Membuat Tombol 3D Yang Keren

Filled under:
Print Friendly and PDF Translate





Assalamu'alaikum,,,

Pagi sobat BLOG*ISLAM, sekarang akan saya kasih tahu tips trik untuk membuat TOMBOL 3D di Blog kalian. Tombol tersebut tidak akan keluar dalam kamu membuat postingan tetapi akan keluar di laman kamu nantinya yang akan menuju link kalian yang akan kamu masukkan nantinya.

Langsung saja ke TKPnya:

1. Masuk ke blogger kamu

2. Masuk ke Template>>> Edit HTML

3. Kalau sudah masuk ke Edit HTML, sekarang kamu cari ]]></b:skin> dengan cara cepat tekan tombol ctrl+F

4. Setelah sudah ketemu masukkan kode di bawah ini tepat diatasnya kode ]]></b:skin> :

 Kode CSS untuk tombol atau button



.btn-animated {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color:#111 !important;
    padding: 10px 25px;
    margin: 0 20px;
    text-shadow:0px 1px 0px rgba(255,255,255,0.3)
    text-decoration: none;
}

 Kode CSS untuk memberikan efek hover pada tombol
.effect-1 {
    transition: padding 1s;
    -webkit-transition: padding 1s;
    -moz-transition: padding 1s;
    -o-transition: padding 1s;
    -ms-transition: padding 1s;
}

.effect-1:hover {
    padding: 10px 200px;
}

.effect-2 {
    transition: border-radius 2s;
    -webkit-transition: border-radius 2s;
    -moz-transition: border-radius 2s;
    -o-transition: border-radius 2s;
    -ms-transition: border-radius 2s;
}

.effect-2:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.effect-3 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-3:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.effect-4 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-4:hover {
    border-radius: 50px 5px 50px 5px;
    -webkit-border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}

.effect-5 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-5:hover {
    border-radius: 5px 50px 5px 50px;
    -webkit-border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

 Kode CSS untuk tombol atau button dengan efek shapes

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.shape-1 {
    -webkit-border-radius: 5px 50px 5px 50px;
    border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

.shape-2 {
    -webkit-border-radius: 50px 5px 50px 5px;
    border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}


Kode CSS untuk tombol warna
Banyak warna yang bisa digunakan dalam tombol animasi ini, dan sebagai contoh saya hanya memberikan tombol yang berwarna UNGU saja, untuk yang lainnya, silahkan gunakan warna yang kalian suka. Untuk mengganti warna, silahkan lihat di Kode Warna


.ungu {
    border: solid 1px #841FF0;
    background-color: #A93EF0;
    background: -moz-linear-gradient(top, #A93EF0 0%, #D07FF0 100%);
    background: -webkit-linear-gradient(top, #A93EF0 0%, #D07FF0 100%);
    background: -o-linear-gradient(top, #A93EF0 0%, #D07FF0 100%);
    background: -ms-linear-gradient(top, #A93EF0 0% ,#D07FF0 100%);
    background: linear-gradient(top, #A93EF0 0% ,#D07FF0 100%);
    -webkit-box-shadow: 0px 0px 1px #9F85F0, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #9F85F0, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #9F85F0, inset 0px 0px 1px #FFFFFF;
}

.ungu:hover {
    background-color: #EE5EF0;
    background: -moz-linear-gradient(top, #EE5EF0 0%, #CA61C9 100%);
    background: -webkit-linear-gradient(top, #EE5EF0 0%, #CA61C9 100%);
    background: -o-linear-gradient(top, #EE5EF0 0%, #CA61C9 100%);
    background: -ms-linear-gradient(top, #EE5EF0 0% ,#CA61C9 100%);
    background: linear-gradient(top, #EE5EF0 0% ,#CA61C9 100%);
}

.ungu:active {
    background-color: #AB83C9;
    background: -moz-linear-gradient(top, #AB83C9 0%, #9F8BC9 100%);
    background: -webkit-linear-gradient(top, #AB83C9 0%, #9F8BC9 100%);
    background: -o-linear-gradient(top, #AB83C9 0%, #9F8BC9 100%);
    background: -ms-linear-gradient(top, #AB83C9 0% ,#9F8BC9 100%);
    background: linear-gradient(top, #AB83C9 0% ,#9F8BC9 100%);
}
Penulisan kode markup untuk tombol 3D dimensi diatas
Untuk penulisan tombol 3D animasi diatas, silahkan salin kode HTML berikut
<a href="#" class="btn-animated square ungu effect-5">Klik Disini</a>

HASIL TAMPILAN


5. SAVE.

6. Silahkan membuat postingan yang dengan link tetapi formatnya di tambah class="EFEK YANG MAU DIKASIH"


 


4 comments:

  1. Mantap tutorialnya. kunjungan balik dari waroenkblog.com kang.

    ReplyDelete
    Replies
    1. Terimakasih, ya kang saya akan berkunjung balik ke waroenkblog.com

      Delete
  2. Hello my family member! I wish to say that this post is
    amazing, great written and come with almost all significant infos.

    I would like to peer extra posts like this .

    Stop by my site: minecraft free download

    ReplyDelete
  3. I have learn a few just right stuff here. Definitely worth
    bookmarking for revisiting. I wonder how much attempt you put to create such a magnificent informative web site.


    Review my web site - quest bars

    ReplyDelete

 

Copyright © 2014. "MASTER MUNYIL". Designed by: BigsMaster