Mecha versi 2.6.4 sudah dirilis!

CSS3 Tombol 3 Dimensi

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
CSS3 3D Button

HTML 

<a class='button3' href='#'>Tombol 3 Dimensi</a>

CSS 

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

Demo 

Tombol 3 Dimensi Tombol 3 Dimensi Tombol 3 Dimensi

Disederhanakan dari: http://css3exp.com/button

7 Komentar

uki

Cssnya di taruh di mana ?
Maaf newbie...

Taufik Nurrohman

@UqiDi atas ]]></b:skin> atau </style>

Unknown

ke template > penyesuaian > tingkat lanjut > css :D | cara newbrot :v

Suparyanto

Nice button. Saya coba masukan ke dalam Postingan,tapi buttonnya tidak aktif. Aktifkan hanya saat hover. :'( Ada solusi?

Taufik Nurrohman

@Suparyanto Coba tambahkan !important:

.button3:active {
position:relative !important;
top:2px !important;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4) !important;
-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4) !important;
box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4) !important;
}

Unknown

asli kalo dah faham jadi betah euy di blog si akang :D

Komentar telah ditutup.