Simple Button For Your Site

Simple Button For Your Site.

CSS

.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;
}
button.button,input.button {
  cursor:pointer;
  overflow:visible;
}
button::-moz-focus-inner {
  border:0;
  padding:0;
}
input::-moz-focus-inner {padding:.4em;} .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;
}
.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";}

/* Button Facebook & Twitter */

.tw,.fb,.gl,.tw:hover,.fb:hover,.gl: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);
}
.gl,.gl:focus {
  background-color:#ff8000;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.tw:hover {background-color:#b1f0f3;}
.fb:hover {background-color:#879bc3;}
.gl:hover {background-color:#ff5000;}
.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);
}
.gl:before {
  content:"G";
  background:#ff6000;
  background:rgba(0,0,0,.1);
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

HTML

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

HTML SOCIAL

<a href="http://twitter.com/Your-Twitter" class="button tw">Follow me</a>
<a href="http://www.facebook.com/Your-Facebook" class="button fb">Become a fan</a>
<a href="https://plus.google.com/Your-profil-G+" class="button gl">Add me google +</a>