Sahur...Sahurrrrr.sahurrrrr.... yo semua yg menjalankan ibadah puasa bagun sahur yuk.! Ahai kembali iseng dengan CSS kini saya akan bagikan button download yang keren juga menurut saya cieeee..! Setelah barusan saya juga membagikan Menu Horisontal Dengan Css3 kini saatnya untuk button download pada blog, berikut kodenya.

CSS

/*
Button Download Css3
Name: DHF BUTTON
Designer: Dharla Ferdana
URL: http://www.dhf.web.id
*/

.button {
  display: inline-block;
  vertical-align: top;
  height: 48px;
  line-height: 46px;
  padding: 0 25px;
  font-family: inherit;
  font-size: 15px;
  color: #bbb;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  background-color: #303030;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #202020 #1a1a1a #111;
  border-radius: 25px;
  background-image: -webkit-linear-gradient(top, #3d3d3d, #272727);
  background-image: -moz-linear-gradient(top, #3d3d3d, #272727);
  background-image: -o-linear-gradient(top, #3d3d3d, #272727);
  background-image: linear-gradient(to bottom, #3d3d3d, #272727);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.button:hover {
  background-color: #363636;
  background-image: -webkit-linear-gradient(top, #404040, #2a2a2a);
  background-image: -moz-linear-gradient(top, #404040, #2a2a2a);
  background-image: -o-linear-gradient(top, #404040, #2a2a2a);
  background-image: linear-gradient(to bottom, #404040, #2a2a2a);
}
.button:active, .button.active {
  line-height: 48px;
  color: #ccc;
  background-color: #b42f32;
  border-color: #1c1c1c #202020 #222;
  background-image: -webkit-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
  background-image: -moz-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
  background-image: -o-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
  background-image: linear-gradient(to bottom, #a3161a, #b63335 60%, #bf4749);
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
}
.button-check {
  position: relative;
  width: 48px;
  padding: 0;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}
.button-check:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -10px;
  height: 5px;
  width: 16px;
  border: solid #bbb;
  border-width: 0 0 5px 5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.button-check:active:before, .button-check.active:before {
  margin-top: -6px;
  border-color: #ccc;
  -webkit-box-shadow: -1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: -1px 1px rgba(0, 0, 0, 0.3);
}

/* a.k.a. the Unicode version */
.lt-ie9 .button {line-height: 46px;}
.lt-ie9 .button-check:before {content: none;}
.lt-ie9 .button-check:after {
  content: '\2713';
  font-size: 24px;
  font-weight: bold;
  color: #bbb;
}

Dan untuk cara menggunakannya berikut caranya

HTML

<a href="#" class="button">Button Download</a>
<a href="#" class="button active">Button Download</a> 
<a href="#" class="button button-check">OK</a>
<a href="#" class="button button-check active">OK</a>

Cukup sampai disitu saja semoga bermanfaat.