Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, December 21, 2013

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:34 AM

2 comments :

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog