Skip to content

Instantly share code, notes, and snippets.

@anatolinicolae
Created June 19, 2012 08:31
Show Gist options
  • Save anatolinicolae/2953022 to your computer and use it in GitHub Desktop.
Save anatolinicolae/2953022 to your computer and use it in GitHub Desktop.
Stylish Gradient Buttons
/**
* Stylish Gradient Buttons
*/
/**
* Designed and coded by Anatoli Nicolae
* http://dribbble.com/anatolinicolae
*/
body {
background: #f5f5f5;
width: 100%;
height: 100%;
font: 16px 'Helvetica-Neue', "Helvetica", arial, sans-serif;
}
.steve {
width: 500px;
height: 250px;
margin: 25% auto 0;
}
.button {
padding: 13px 40px;
border: 1px solid;
border-radius: 4px;
box-shadow: inset 0 -2px 15px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
}
.red {
border-color: #C9362F;
background-color: #e67060;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(230, 112, 96)), to(rgb(205, 41, 37)));
background-image: -webkit-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
background-image: -moz-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
background-image: -o-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
background-image: -ms-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
background-image: linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#e67060', EndColorStr='#cd2925');
}
.green {
border-color: #008f4f;
background-color: #00dd95;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 221, 149)), to(rgb(0, 184, 78)));
background-image: -webkit-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
background-image: -moz-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
background-image: -o-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
background-image: -ms-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
background-image: linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#00dd95', EndColorStr='#00b84e');
}
.blue {
border-color: #194fdc;
background-color: #67a4f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(103, 164, 247)), to(rgb(37, 96, 237)));
background-image: -webkit-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
background-image: -moz-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
background-image: -o-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
background-image: -ms-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
background-image: linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#67a4f7', EndColorStr='#2560ed');
}
.gray {
border-color: #363e46;
background-color: #6b7179;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(107, 113, 121)), to(rgb(40, 44, 51)));
background-image: -webkit-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
background-image: -moz-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
background-image: -o-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
background-image: -ms-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
background-image: linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6b7179', EndColorStr='#282c33');
}
.button:hover { opacity: 0.85; }
.button:active { position: relative; top: 1px; }
<section class="steve">
<a class="red button">Love</a>
<a class="green button">your</a>
<a class="blue button">CSS3</a>
<a class="gray button">more!</a>
</section>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment