A Pen by Khalid.

index.html

<div class="container">
  <!--
  <h1>Light buttons</h1>
  <p>I recreated <a class="credit" target="_blank" href="http://drbl.in/hxLW">these button styles</a> in CSS. It might be useful for beginners (or for the lazy folks).</p>
  -->
  <h2><a class="credit" title="Freebie on Dribbble" target="_blank" href="http://drbl.in/hxLW">PSD</a> to CSS conversion</h2>
  
  <div class="demo">
    <a class="btn normal" href="#"></a>
    <a class="btn hover" href="#"></a>
    <a class="btn active" href="#"></a>
  </div>
  
  <h2>Real usage example</h2>
  
  <div class="real-world-example">
    <a class="btn" href="http://codepen.io/khalid" target="_blank">Visit My Codepen Profile</a>
  </div>
  
</div>

Light-Buttons.markdown

Light Buttons

I recreated this button from Dribbble with CSS gradients and the background-size property.

A Pen by Khalid on CodePen.

License.

style.css

body {
  background-color: #f1f1f1;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #666;
  padding: 40px;
  margin: 0;
}

.container {
  width: 319px;
  margin: 0 auto;
  padding: 0;
}

h1 {
  padding-bottom: 10px;
  font-size: 24px;
  color: #333;
}

h2 {
  padding: 10px 0;
  font-size: 18px;
  color: #333;
}

.demo a {
  display: block;
  width: 317px;
  height: 44px;
  padding: 0;
  margin: 0 auto 24px auto;
  background-color: whitesmoke;
}
.btn {
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #d0cdd3 #c2bfc7 #b3afba;
  box-shadow: inset 0 0 3px rgba(255,255,255,.76), 0 1px 3px rgba(196,192,200,.85);
  background-color: #f2f2f4;
  background-image: -webkit-linear-gradient(
						top,
						#fff 0%,
						#f8f8f9 4%,
            #ebeaed 90%,
            #dad6dd
					); /* Old syntax for Safari, Prefix free doesn't solve it automatically */
	background-image: linear-gradient(
						to bottom,
						#fff 0%,
						#f8f8f9 4%,
            #ebeaed 90%,
            #dad6dd
					);
  
  /* Some further adaptions to get as close as possible to the psd */
  background-size: auto 103%;
  background-position: center;
  background-repeat: repeat-x;
  
  /* The psd did not contain button text (with padding, colors and other font specifications) so I'll give it a custom appearance */
  padding: 11px 30px;
  text-decoration: none;
  color: #555;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  font-weight: bold;
  font-size: 14px;
}

.real-world-example .btn:hover, .hover {
  background-image: -webkit-linear-gradient(
						top,
						#fff 0%,
						#f5f4f8 4%,
            #e4e2eb 90%,
            #dad6e0
					); /* Old syntax */
  background-image: linear-gradient(
						to bottom,
						#fff 0%,
						#f5f4f8 4%,
            #e4e2eb 90%,
            #dad6e0
					);
}

.real-world-example .btn:active, .active {
  background-image: -webkit-linear-gradient(
						top,
						#fff 0%,
						#e9e8ec 4%,
            #f7f7f8 90%,
            #e4e1e6
					); /* Old syntax */
  background-image: linear-gradient(
						to bottom,
						#fff 0%,
						#e9e8ec 4%,
            #f7f7f8 90%,
            #e4e1e6
					);
}

.credit {
  color: rgb(0, 150, 187);
  text-decoration: none;
  border-bottom: 1px solid rgb(0, 150, 187);
}