Cara buat tombol dengan css di blog

Button Effect Pure CSS

Gak neko-neko, gak ribet sobat cuma tinggal Copy kode tombol pilihan Anda, lalu letakkan tombol ini akan Anda tampilkan alam html atau 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)
Model  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

demo dibawah ini,,

( 1 ) Slide in Bottom Border

( 2 ) Slide in Top Border

( 3 ) Rotate Effect Skew

( 4 ) Background Swap

( 5 ) Pop Out Effect | Zoom

( 6 ) Quick Click

( 7 ) 3D On Hover

( 8 ) Slide Down Background

( 9 ) Slide Up Background

( 10 ) Slide Right Background

( 11 ) Slide Left Background

( 12 ) Radiating Border

( 13 ) Spinning Diamond

sumber: sahabat blogger77