Collection Button Effect Pure CSS
13 Model Tombol Dengan CSS - Karena ada beberapa hal yang tidak mungkin untuk ditinggalkan, sehingga update artikel terbaru di blog ini, baru bisa saya publikasikan buat teman-teman semua pecinta SAHABAT BLOGGER 77 dengan tema 13 Model Tombol Dengan CSS, diantaranya:




DEMO SHOW





Anda Tinggal KLIK Tombol pilihan Anda disini..



button



BACA JUGA
Efek Zoom Gambar Mode Slide Teks


Collection Button Effect Pure CSS
Anda tinggal Copy kode tombol pilihan Anda, lalu letakkan dimana tombol ini akan Anda tampilkan dalam postingan, pilihannya:


1. Slide In Bottom Border
Efek yang terjadi pada tombol ini yaitu pemberian garis bawah (bottom border) saat tombol di hover dengan model tampilan slide border. CSS lengkapnya seperti ini:

<style type='text/css'>
/* Slide In Bottom Border */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn1:hover:after {background-position:0 0}
.btn1 {background:#b9ca4a;position:relative}
.btn1:after {
  content: "";
  background:-webkit-linear-gradient(left, aqua 0%, #39f 50%, #222 50%, #222 100%);
  background:linear-gradient(to right, aqua 0%, aqua 50%, #222 50%, #222 100%);
  background-position: 100% 0;background-size: 200% 100%;
  width: 100%;height: 5px;position: absolute;top: 100%;left: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s}
</style>
<div class="button btn1">( 1 ) Slide in Bottom Border</div>


2. Slide In Top Border
<style type='text/css'>
/* Slide In Top Border */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn2 {background:#00FF7F;position:relative}
.btn2:hover:before {background-position:0 0}
.btn2:before {
  content: "";
  background: -webkit-linear-gradient(left, red 0%, red 50%, #222 50%, #222 100%);
  background: linear-gradient(to right, red 0%, red 50%, #222 50%, #222 100%);
  background-position: 100% 0;background-size: 200% 100%;
  width: 100%;height: 5px;position: absolute;top: 0;left: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s}
</style>
<div class="button btn2">( 2 ) Slide in Top Border</div>


3. Rotate Effect Skew
Model tombol yang ini yang menarik, saya membuat kemiringan dengan dimensi 10px, dan itu terjadi saat tombol berputar » 360 deg. CSS lengkapnya seperti ini:

<style type='text/css'>
/* Rotate Effect Skew */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn3 {
  background-color: #e78c45;
  position: relative;
  -webkit-transition: all 1.25s;
  -moz-transition: all 1.25s;
  -ms-transition: all 1.25s;
  -o-transition: all 1.25s;
  transition: all 1.25s;
  top:0}

.btn3:hover {
transform:rotate(370deg);
-webkit-transform:rotate(370deg);
-moz-transform:rotate(370deg);
-ms-transform:rotate(370deg);
-o-transform:rotate(370deg)}
</style>
<div class="button btn3">( 3 ) Rotate Effect Skew</div>


4. Background Swap
Membuat ragam warna background pada tombol, dan saya mengambil titik focus tengah dengan model skew (miring) menggunakan CSS background linear-gradient, efeknya background akan bertukar tempat (swap) saat tombol dihover dengan susunan kode CSS seperti ini:

<style type='text/css'>
/* Background Swap */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn4 {
  background:-webkit-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);
  background:-moz-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);
  background:-ms-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);
  background:-o-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);
  background:linear-gradient(-45deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%)}

.btn4:hover {
  background:-webkit-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);
  background:-moz-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);
  background:-ms-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);
  background:-o-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);
  background:linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%)}
</style>
<div class="button btn4">( 4 ) Background Swap</div>


5. Pop Out Effect | Zoom
<style type='text/css'>
/* Pop Out Effect | Zoom */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn5 {
  background:#6495ED;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  box-shadow: 1px 1px 2px #000}

.btn5:hover {
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -o-transform:scale(1.5);
  -ms-transform:scale(1.5);
  transform:scale(1.5)}
</style>
<div class="button btn5">( 5 ) Pop Out Effect | Zoom</div>


6. Quick Click
<style type='text/css'>
/* Quick Click */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn6:active {top:4px}
.btn6 {background:#DC143C;box-shadow:0px 0px 15px #000;position:relative;top:0;color:#fff;text-shadow:1px 2px 1px #111}
</style>
<div class="button btn6">( 6 ) Quick Click</div>


7. 3D On Hover
<style type='text/css'>
/* 3D On Hover */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn7:hover {box-shadow:none;top:5px;left:5px}
.btn7 {
  top:0;left:0;position:relative;
  border-radius:5px;background: red;
  color:#fff;text-shadow:1px 2px 2px #111;
  box-shadow:2px 2px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc;
  transition:top 0.25s, left 0.25s, box-shadow 0.25s;
  -webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;
  -moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;
  -o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}
</style>
<div class="button btn7">( 7 ) 3D On Hover</div>


8. Slide Down Background
Efek slide sama dengan tampilan tombol yang pertama dan kedua, namun model tombol ini  saya buat dengan background full (tombol akan berubah warna saat di HOVER dengan efek slide-down), perpindahan warna akan terjadi dari bawah keatas dengan sistem slide. Kode lengkapanya seperti ini:

<style type='text/css'>
/* Slide Down Background */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn8:hover {background-position:0 0}
.btn8 {
  background:-webkit-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);
  background:-moz-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);
  background:-ms-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);
  background:-o-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);
  background:linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);
  background-size:100% 200%;
  background-position:100% 100%;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s}
</style>
<div class="button btn8">( 8 ) Slide Down Background</div>


9. Slide Up Background
<style type='text/css'>
/* Slide Up Background */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn9:hover {background-position:100% 100%}
.btn9 {
  background:-webkit-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);
  background:-moz-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);
  background:-ms-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);
  background:-o-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);
  background:linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);
  background-size:100% 200%;
  background-position:0 0;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s}
</style>
<div class="button btn9">( 9 ) Slide Up Background</div>


10. Slide Right Background
<style type='text/css'>
/* Slide Right Background */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn10:hover {background-position:0 0}
.btn10 {
  background:-webkit-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);
  background:-moz-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);
  background:-ms-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);
  background:-o-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);
  background:linear-gradient(to right, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s}
</style>
<div class="button btn10">( 10 ) Slide Right Background</div>


11. Slide left Background
<style type='text/css'>
/* Slide Left Background */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn11:hover {background-position:100% 0}
.btn11 {
  background:-webkit-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);
  background:-moz-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);
  background:-ms-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);
  background:-o-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);
  background:linear-gradient(to right, #c397d8 0%, #c397d8 50%, #FFDE00 50%);
  background-size:200% 100%;
  background-position:0 0;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s}
</style>
<div class="button btn11">( 11 ) Slide Left Background</div>


12. Radiating Border
Memberi garis diluar tombol dengan jarak tertentu, dan itu akan terjadi saat tombol di hover, sedangkan kecepatan kemunculan garis saya atur dengan transition ease-in-out. Mau membuat model tombol ini, CSS lengkapnya seperti ini:

<style type='text/css'>
/* Radiating Border */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn12 {background:#e78c45;position:relative}
.btn12:hover {background:#7FFF00}
.btn12:hover:after {height:95px;width:390px;top:-12px;left:-12px}
.btn12:after {
  content: "";height: 0;width: 0;position: absolute;top: 50%;left: 50%;
  border: 2px solid #7FFF00;z-index: -10;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out}
</style>
<div class="button btn12">( 12 ) Radiating Border</div>


13. Spinning Diamond (Arrow)
Coba lihat disini » Membuat Tombol Download Dengan CSS Pseudo. Model hampir sama, namun efeknya saya modifikasi mirip tampilan tooltip teks dengan arrow, sedangkan efeknya saya buat berputar hanya pada tanda panahnya saja (spinning diamond), kodenya seperti ini:

<style type='text/css'>
/* Spinning Diamond (Arrow) */
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}
.btn13 {
  background:#4DD9B2;
  position:relative;
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;
  -ms-transition:all 0.25s ease-in-out;
  -o-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out}

.btn13:after {
  content: "";background: #4DD9B2;height: 25px;width: 25px;
  position: absolute;top: 61px;left: 162px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;
  -ms-transition:all 0.25s ease-in-out;
  -o-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out}

.btn13:hover {background:#b6efdf}
.btn13:hover:after {
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  transform:rotate(135deg);
  background:red}
</style>
<div class="button btn13">( 13 ) Spinning Diamond</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 13 Model Tombol Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

10 komentar

  1. .Yang Radiating Border keren yah mbak. :)
    .Cakep-cakep ulala. :D .Banyak koleksi hehe.

    BalasHapus
  2. wah, button effect nya semuanya keren, tapi yang paling saya suka nomor 5 yang pop out effect, membesar gitu kalau di sentuh, ijin kopi kode dan menggunakannya yia Bos...

    BalasHapus
    Balasan
    1. ini sukanya main yang besar-besar.....
      biar muantab ya gan. heeee

      Hapus
  3. Cantik cantik Koleksinya mbak....! Secantk Orangnya [-(

    BalasHapus
  4. Mesti bertapa dulu nih sebelum ngulik CSS =D

    BalasHapus
    Balasan
    1. gak usah bertapa el....mandi pake kulit jamur aja, dijamin gatal. heheheeee

      Hapus
    2. cukup 1 syaratnya biar bisa ngulik CSS, pakai sabun dulu, baru setelah itu guyur pakai air., dijamin berbuih..!!

      Hapus
  5. kayaknya saya pakai semuanya aja deh sist. buat ganti tombol download dan demo ....biar lebih variatif....biar banyak modelnya dan ramai gitu....iya gak sista admin?

    BalasHapus
  6. maaf kayaknya komen saya melenceng sista....tapi gak papa ya
    kalau menggunakan bebera script untuk penyesuaian browser kadang di warning sama w3c....jadi lebih bagus di muat atau di hilangkan aja sista?

    BalasHapus
    Balasan
    1. masalah validasi banyak yang harus dihilangkan dan harus dibenahi sampai itu menyebabkan error, warning, namun kita kembalikan lagi kepada kepuasan pengguna, saat element dimana itu kita hilangkan ternyata tidak support pada peramban yang digunakan mereka, maka mereka akan mengatak, maaf mbak, efeknya gak bekerja di Template saya, mungkin tidak suppot diTemplate saya, padahal hanya karena sistem peramban yang tidak disertakan sebagai tampilan dukungan.

      Chrome mungkin tidak membutuhkan apa yang di ( Warning ) oleh W3C, tetapi, beberapa peramban lain masih belum bisa membaca validasi elemen.

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK