» » Cara Membuat Button Keren Dengan CSS

Cara Membuat Button Keren Dengan CSS

Cara Membuat Button Keren Dengan CSS - Siang gan kali ini saya akan share bagaimana membuat botton keren di blog. awal nya saya bingung lihat blog temen ada pilihan DEMO dan DOWNLOAD, disitu saya bingungnya itu gambar atau bukan akhirnya penasaran saya muncul dan ingin mengetahui bagaimana cara membuat nya. Alhasil saya menemukan jawaban nya itu adalah button yang sudah di edit sedemikian rupa, tapi tenang saja script css nya akan saya share secara gratis kepada agan penikmat blog saya ini. ^.^ untuk lebih jelasnya tentang artikel kali ini silahkan lihat di bawah ini ^.^

1. Login blogger.com
2. Pilih Template >> Edit HTML >> Cari script ]]></b:skin>
3. Jika sudah ketemu copy kode css di bawah ini tepat di atas script tersebut


.button
{
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}

.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}

.button:focus
{
outline: 0;
background: #fafafa;
}

.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;
pointer-events: none;
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
button::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

/* Hexadecimal entities for the icons */

.add:before
{
content: "271A";
}

.edit:before
{
content: "270E";
}

.delete:before
{
content: "2718";
}

.save:before
{
content: "2714";
}

.email:before
{
content: "2709";
}

.like:before
{
content: "2764";
}

.next:before
{
content: "279C";
}

.star:before
{
content: "2605";
}

.spark:before
{
content: "2737";
}

.play:before
{
content: "25B6";
}
/* Social media buttons */
.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #88E1E6;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

.tw:before
{
content: "t";
background: #91cfd3;
background: rgba(0,0,0,.1);
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

.fb:before
{
content: "f";
background: #4467ac;
background: rgba(0,0,0,.1);
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}



 4. Lalu Simpan template
5. Setelah itu saya akan kasih tau bagaimana cara memanggil button tersebut di postingan anda.
6. Pilih New Entri
7. Pilih HTML jangan Compose
8. Lalu Pilih button di bawah ini pastekan ini kedalam postingan anda
<a class="button" href="http://catatan-seoku.blogspot.com">Catatan Seoku</a>
<a class="button add" href="http://facebook.com/wahyupoer">Add Facebook</a>
<a class="button edit" href="http://blogger.com/">Edit</a>
Edit
<a class="button delete" href="http://blogger.com">Delete</a>
<a class="button save" href="http://blogger.com">Save</a>
Save
<a class="button email" href="mailto:wahyu.poer32@gmail.com">Send email</a>
<a class="button like" href="http://facebook.com">Like</a>
<a class="button next" href="http://facebook.com">Next</a>
<a class="button star" href="http://kaskus.co.id">Favourite</a>
Favourite
<a class="button spark" href="http://blogger.com">Spark</a>
Spark
<a class="button play" href="http://blogger.com">Play</a>
Play
<a class="button tw" href="http://twitter.com/wahyupoer">Follow me</a>
<a class="button fb" href="http://facebook.com">Become a fan</a>

NB : 
Untuk Warna biru : silahkan diganti dengan url agan
Untuk Warna hijau : silahkan diganti dengan diskripsi agan

 Jika anda bingung silahkan comment di bawah ini jika anda masih bingung. terima kasih sudah membaca artikel saya ini Cara Membuat Button Keren Dengan CSS dan mampir di blog saya yang jelek ini. semoga artikel ini bermanfaat ^.^

 Special Thank's To BlogCunayz

Subscribe to receive free email updates:

4 Responses to "Cara Membuat Button Keren Dengan CSS"

Terima Kasih Sobat Sudah:

1. Berkomentar Dengan Sopan dan santun
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. komentar kasar/berbau Sara/Porno saya anggap sebagai SPAM

Demikian harap di maklumi .

Subscribe to: Post Comments (Atom)