Skip to content

Instantly share code, notes, and snippets.

@jasondavis
Created July 12, 2012 04:53
Show Gist options
  • Select an option

  • Save jasondavis/3095897 to your computer and use it in GitHub Desktop.

Select an option

Save jasondavis/3095897 to your computer and use it in GitHub Desktop.
Nice Button
/**
* Nice Button
*/
.ml-button:active {
box-shadow: rgba(0, 0, 0, .15) 0 .05882352941176em .17647058823529em inset;
-webkit-box-shadow: rgba(0, 0, 0, .15) 0 .05882352941176em .17647058823529em inset;
-moz-box-shadow: rgba(0,0,0,.15) 0 .05882352941176em .17647058823529em inset;
transition-duration: 0s;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
}
.ml-button:hover {
box-shadow: white 0 .05882352941176em 0 inset, rgba(0, 0, 0, .23) 0 .05882352941176em .29411764705882em;
-webkit-box-shadow: white 0 .05882352941176em 0 inset, rgba(0, 0, 0, .23) 0 .05882352941176em .29411764705882em;
-moz-box-shadow: white 0 .05882352941176em 0 inset, rgba(0,0,0,.23) 0 .05882352941176em .29411764705882em;
color: #61686B;
transition-duration: 0.1s;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.ml-button {
background: #EFF1F2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eff1f2, endColorstr=#eaeced);
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #EFF1F2), color-stop(100%, #EAECED));
background-image: -webkit-linear-gradient(#EFF1F2, #EAECED);
background-image: -moz-linear-gradient(#EFF1F2, #EAECED);
background-image: -ms-linear-gradient(#EFF1F2, #EAECED);
background-image: -o-linear-gradient(#EFF1F2, #EAECED);
background-image: linear-gradient(#EFF1F2, #EAECED);
border: 1px solid #CCCDCE;
border-bottom-color: #C5C5C6;
border-top-color: #D4D5D6;
border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
box-shadow: white 0 1px 0 inset, rgba(0, 0, 0, .07) 0 .05882352941176em .05882352941176em;
-webkit-box-shadow: white 0 1px 0 inset, rgba(0, 0, 0, .07) 0 .05882352941176em .05882352941176em;
-moz-box-shadow: white 0 1px 0 inset, rgba(0,0,0,.07) 0 .05882352941176em .05882352941176em;
color: #61686B;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, Clean, sans-serif;
font-size: 1.0625em;
font-weight: bold;
padding: .58823529411765em 1.23529411764706em .58823529411765em;
text-decoration: none;
text-shadow: white 1px 1px 0;
}
<div style="text-align: center;">
<a href="#" target="" class="ml-button ">Launch</a>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment