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:

Cara Membuat Tombol 3D Animasi CSS di Blog

Klik Untuk Melihat Kode Tombol 3D Animasi

Silahkan buka akun Blogger sobat
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

Tombol Efek Melebar Menggunakan efek rounded dengan kombinasi effect-1

Klik Disini Menggunakan efek square dengan kombinasi effect-2 Klik Disini Menggunakan efek square dengan kombinasi effect-2 Klik Disini Menggunakan efek square dengan kombinasi effect-2

Klik Disini Menggunakan efek rounded dengan kombinasi effect-3 Klik Disini Menggunakan efek rounded dengan kombinasi effect-3 Klik Disini Menggunakan efek rounded dengan kombinasi effect-3

Klik Disini Menggunakan efek shape-1 dengan kombinasi effect-4 Klik Disini Menggunakan efek shape-1 dengan kombinasi effect-4 Klik Disini Menggunakan efek shape-1 dengan kombinasi effect-4

Klik Disini Menggunakan efek shape-2 dengan kombinasi effect-5 Klik Disini Menggunakan efek shape-2 dengan kombinasi effect-5 Klik Disini Menggunakan efek shape-2 dengan kombinasi effect-5

Klik Disini Menggunakan efek rounded dengan kombinasi effect-5 Klik Disini Menggunakan efek square dengan kombinasi effect-4 Klik Disini Menggunakan efek shape-1 dengan kombinasi effect-3

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