CSS3 Buttons

CSS3-Buttons.markdown

CSS3 Buttons

A Pen by Karsten vom Wege on CodePen.

License.

index.html

<div class="button-set">
  <a href="#" class="button grey tiny"><i class="icon-home"></i> Home</a>
  <a href="#" class="button yellow tiny"><i class="icon-cogs"></i> Settings</a> 
  <a href="#" class="button red tiny"><i class="icon-download-alt"></i> Download</a><br /><br />
  <a href="#" class="button grey"><i class="icon-home"></i> Home</a>
  <a href="#" class="button yellow"><i class="icon-cogs"></i> Settings</a> 
  <a href="#" class="button red"><i class="icon-download-alt"></i> Download</a><br /><br />
  <a href="#" class="button grey giant"><i class="icon-home"></i> Home</a>
  <a href="#" class="button yellow giant"><i class="icon-cogs"></i> Settings</a> 
  <a href="#" class="button red giant"><i class="icon-download-alt"></i> Download</a>
</div>

style.css

html {
  -webkit-font-smoothing: antialiased;
  	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

body {
  padding: 50px;
  background-color: #f5f5f5;
}

a.button i {
  margin-right: 3px;
}

a.button {
  color:#000;
  margin: 0 2px;
  font-size: 15px;
  padding: 10px 15px; 
  display:inline-block;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #ddd;
  -webkit-box-shadow: 0 5px 6px -3px #999;
	   -moz-box-shadow: 0 5px 6px -3px #999;
	        box-shadow: 0 5px 6px -3px #999;
}

a.button.giant {
  padding: 15px 25px; 
  font-size: 1.5em;
}

a.button.tiny {
  padding: 5px 10px;
  font-size: 0.9em;
}

a.button:hover {
  -webkit-box-shadow: 0 4px 6px -3px #aaa;
     -moz-box-shadow: 0 4px 6px -3px #aaa;
          box-shadow: 0 4px 6px -3px #aaa;
}

a.button.grey {
  color: #222;
  background-color: #f5f5f5; 
  background-image: url(images/fallback-gradient.png); 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#dddddd));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #dddddd); 
  background-image:    -moz-linear-gradient(top, #f5f5f5, #dddddd);
  background-image:     -ms-linear-gradient(top, #f5f5f5, #dddddd);
  background-image:      -o-linear-gradient(top, #f5f5f5, #dddddd);
  border: 1px solid #cccccc;
  text-shadow: #fff 1px 1px 0;
}

a.button.grey:active {
  margin-top: 10px
  -webkit-box-shadow: inset 0 4px 6px -3px #999;
     -moz-box-shadow: inset 0 4px 6px -3px #999;
          box-shadow: inset 0 4px 6px -3px #999;
}

a.button.red {
  color: #fff;
  background-color: #c00; 
  background-image: url(images/fallback-gradient.png); 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c00), to(#8a0000));
  background-image: -webkit-linear-gradient(top, #c00, #8a0000); 
  background-image:    -moz-linear-gradient(top, #c00, #8a0000);
  background-image:     -ms-linear-gradient(top, #c00, #8a0000);
  background-image:      -o-linear-gradient(top, #c00, #8a0000);
  border: 1px solid #6b0000;
  text-shadow: #6b0000 1px 1px 0;
}

a.button.red:hover,
a.button.yellow:hover{
  color: #fff;
  background-color: #111; 
  background-image: url(images/fallback-gradient.png); 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
  background-image: -webkit-linear-gradient(top, #333, #000); 
  background-image:    -moz-linear-gradient(top, #333, #000);
  background-image:     -ms-linear-gradient(top, #333, #000);
  background-image:      -o-linear-gradient(top, #333, #000);
  border: 1px solid #000;
  text-shadow: #000 1px 1px 0;
}

a.button.red:active,
a.button.yellow:active{
  margin-top: 10px
  -webkit-box-shadow: inset 0 6px 6px -3px #000;
     -moz-box-shadow: inset 0 6px 6px -3px #000;
          box-shadow: inset 0 6px 6px -3px #000;
}

a.button.yellow {
  color: #000;
  background-color: #ffd500; 
  background-image: url(images/fallback-gradient.png); 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd500), to(#f7a600));
  background-image: -webkit-linear-gradient(top, #ffd500, #f7a600); 
  background-image:    -moz-linear-gradient(top, #ffd500, #f7a600);
  background-image:     -ms-linear-gradient(top, #ffd500, #f7a600);
  background-image:      -o-linear-gradient(top, #ffd500, #f7a600);
  border: 1px solid #e79b00;
  text-shadow: #e79b00 1px 1px 0;
}