Tombol Atraktif adalah istilah saya sendiri sebagai penulis yang mana akan dibahas pada kesempatan kali ini. Penerapan CSS pada sebuah tombol atau buttons akan membuat tombol itu menjadi lebih atraktif dan menarik.
Penempatan Tombol Atraktif ini akan menarik perhatian dan merangsang para pengunjung untuk mengatahui apa yang ada dibalik tombol itu, dan juga akan mempermudah pengunjung untuk klik pada tombol tersebut dibandingkan pakai tulisan atau teks.
Supaya sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:
Cara Membuat Tombol Atraktif dengan Memanfaatkan CSS.
Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>.
.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); }
Memanggil Kode diatas pada entri posting dengan cara:
Letakkan kode dibawah ini pada entri posting.
<a href="#" class="button">Button</a>
Ubah kode yang berwarna hijau dengan url blog kamu.
Teks yang berwarna merah dengan jenis buttons yang sobat inginkan.
Teks yang berwarna biru dengan kata yang sobat inginkan.
Pilihan kode tombol atau buttons
<a href="" class="button">Button</a>
<a href="" class="button add">Add</a>
<a href="" class="button edit">Edit</a>
<a href="" class="button delete">Delete</a>
<a href="" class="button save">Save</a>
<a href="" class="button email">Send email</a>
<a href="" class="button like">Like</a>
<a href="" class="button next">Next</a>
<a href="" class="button star">Favourite</a>
<a href="" class="button spark">Spark</a>
<a href="" class="button play">Play</a>
<a href="" class="button tw">Follow me</a>
<a href="" class="button fb">Become a fan</a>
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser