Cara Membuat Tombol 3D Yang Keren

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

Klik Disini

5. SAVE.

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