Sunday, January 22, 2012

CSS3 Tombol 3 Dimensi

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

Labels: , ,

7 Comments:

At Sunday, February 26, 2012 at 6:25:00 AM GMT+7, Blogger uki said...

Cssnya di taruh di mana ?
Maaf newbie...

 
At Sunday, February 26, 2012 at 11:48:00 AM GMT+7, Blogger Taufik Nurrohman said...

@Uqi Di atas ]]></b:skin> atau </style>

 
At Monday, March 26, 2012 at 11:52:00 PM GMT+7, Blogger Suparyanto said...

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

 
At Tuesday, March 27, 2012 at 8:09:00 AM GMT+7, Blogger Taufik Nurrohman said...

@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;
}

 
At Tuesday, March 27, 2012 at 2:19:00 PM GMT+7, Blogger Suparyanto said...

@Taufik NurrohmanOK,diralat dulu..

 
At Saturday, November 2, 2013 at 5:17:00 PM GMT+7, Blogger Unknown said...

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

 
At Saturday, November 2, 2013 at 10:08:00 PM GMT+7, Blogger Unknown said...

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

 

Post a Comment

<< Home