Cara Membuat Buttons Keren dengan CSS

Wahyu Raja Butar-Butar Reply 19:59
Hallo Sobat Blogger semua,, kali ini saya akan share tutor nih,sepertinya sudah lama saya tidak share tutor, oleh karena itu kali ini saya akan share Cara Membuat Buttons Keren dengan CSS. Sebenarna Button dengan CSS ini bukan buatan saya tapi saya hanya share saja. Pembuat buttons ini adalah Catalin Rosu dia seorang web designer. berikut screenshotnya :

Pertama silahkan masukan CSS berikut kedalam template sobat
.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);
}
Selanjutnya adalah cara memanggilnya,berikut caranya :
<a href="#" class="button">Button</a>
Catatan :
  • Ubah kode yang berwarna hijau dengan url sobat
  • Kata yang berwarna merah dengan jenis buttons yang sobat inginkan
  • Sedangkan teks yang berwarna biru dengan kata yang sobat inginkan
Berikut kode-kode buttonsnya
<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>
Sumber : RTD

Related Posts

Web 20106893489669795
Comments
0 Comments
Facebook Comments by Media Blogger

Post a Comment

Search

Google+ Followers

Popular Posts

Translate