button style pseudo dengan CSS 3

Button style pseudo dengan CSS 3 - button style pseudo dengan CSS 3 ini memiliki tampilan yang menarik bisa dibilang memiliki tampilan 2 dimensi. Tampilan button style pseudo dengan CSS 3 ini sangat sering kita jumpai pada situs situs di internet bahkan situs yang terbesar juga memakai jenis button style pseudo dengan CSS 3. Untuk mengetahui jenis button style pseudo dengan CSS 3 ini silahkan klik demo dibawah, dan bila anda tertarik untuk memasang button style pseudo dengan CSS 3 pada halaman blog anda silahkan kunjungi link dibawah ini, saya akan membahasnya secara detail buat anda...

Demo

Code CSS here..

/*****************************************
Name : button style pseudo
By : Rivai Silaban | Blog Design
Update :Sabtu 21, Desember 2013
site : www.rivai.org
******************************************/
.button_style_pseudo {
background-color:#2459E3;
padding:10px;
position:relative;
font-family: Verdana;
font-size:12px;
text-decoration:none;
color:#fff;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #668BEC), color-stop(1, #2459E3) );
background-image: -o-linear-gradient(bottom, #668BEC 0%, #2459E3 100%);
background-image: -moz-linear-gradient(bottom, #668BEC 0%, #2459E3 100%);
background-image: -webkit-linear-gradient(bottom, #668BEC 0%, #2459E3 100%);
background-image: -ms-linear-gradient(bottom, #668BEC 0%, #2459E3 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #474F96;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #474F96;
-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #474F96;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #474F96;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.button_style_pseudo::before {
background-color:#fff;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding-left:2px;
padding-right:2px;
padding-bottom:4px;
left:-2px;
top:5px;
z-index:-1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-o-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px #fff;
}
.button_style_pseudo:active {
color:#0E4256;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #1F8AAD;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #1F8AAD;
-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #1F8AAD;
box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #1F8AAD;
top:5px;
background-color: #1F8AAD;
}
.button_style_pseudo:active::before {
top:-2px;
}
/*** www.rivai.org CSS button style pseudo and ***/

Code HTML here..

<a href="#" class="button_style_pseudo">Button style pseudo</a>

Untuk tehnik pemasangan dan tutorialnya silahkan kunjungi link dibawah ini....

http://www.rivai.org/2013/12/button-style-pseudo.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:34 AM