Jumat, 07 Februari 2014

Membuat Tombol 3D Animasi CSS di Blog

Membuat Tombol 3D Animasi CSS di Blog - Saat ini saya sedang senang-senangnya mempelajari dan membuat kode-kode CSS, kemarin saya sudah membuat tombol 3D dan beberapa minggu yang lalu saya juga sudah menjelaskan beberapa artikel tentang efek tiga dimensi. Masih dengan kategori yang sama, pada artikel ini saya juga memberikan tips tentang membuat tombol 3D animasi dengan CSS di blog atau artikel blog

Untuk artikel yang berhubungan dengan artikel membuat tombol 3D ini silahkan baca juga:
Membuat button 3D sederhana
Membuat teks 3D di blog

Membuat Tombol 3D Animasi CSS di Blog

Cara Membuat Tombol 3D Animasi CSS di Blog

Klik Untuk Melihat Kode Tombol 3D Animasi


Silahkan buka akun Blogger Anda
Cari kode ]]></b:skin> atau </style> dan salin kode berikut setelah atau sebelum kode ]]></b:skin> atau </style>

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

Kode CSS tombol warna UNGU
.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-2">Klik Disini</a>

HASIL TAMPILAN

Klik Disini


Dan berikut beberapa tombol 3d animasi dengan CSS untuk beberapa warna
Real DEMO







Bagaimana, tertarik untuk menggunakan tombol 3D animasi diatas? Dengan menggunakan kode CSS maka akan membuat loading blog lebih ringan daripada harus menggunakan gambar sebagai tombol. Okey, terimakasih telah membaca artikel ini, membuat tombol animasi CSS di blog

Membuat Tombol 3D Animasi CSS di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

8 komentar:

  1. Wah keren nih tombol efek 3d animasinya, lebih simple dan atraktip tanpa membebani loading :)

    BalasHapus
  2. boleh di coba-coba nih, makasih mbak :)

    BalasHapus
  3. mantap mas brow saya sudah pasang diblog ane

    BalasHapus
  4. waaaw pertama kali masuk ke blogg ini sudah disajikan dengan tombol efek 3D yang co cweet,,ijin coba ya,,lucu kayaknya kalau dipasang,hehe

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia