Skip to content

Instantly share code, notes, and snippets.

@jcsrb
Created June 15, 2012 14:59
Show Gist options
  • Save jcsrb/2936875 to your computer and use it in GitHub Desktop.
Save jcsrb/2936875 to your computer and use it in GitHub Desktop.
Dabblet: CSS button done i 10seconds
/*
* Dabblet: CSS button done i 10seconds
* thanks to CSSHat and this PSD file: http://365psd.com/day/56/
* Workman: @machal
*/
.test {
color: #fff;
font: 15px/30px sans-serif;
text-align: center;
display: inline-block;
padding: 0 20px;
height: 30px;
-moz-border-radius: 3px; /* from vector shape */
-webkit-border-radius: 3px; /* from vector shape */
border-radius: 3px; /* from vector shape */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #333; /* layer fill content */
-moz-box-shadow:
inset 0 1px 0 rgba(255,255,255,.31) /* inner shadow */,
0 0 0 1px #549300 /* outer stroke */;
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,.31) /* inner shadow */,
0 0 0 1px #549300 /* outer stroke */;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.31) /* inner shadow */,
0 0 0 1px #549300 /* outer stroke */;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1ZmE3MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ZGM1MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient fill */
background-image: -moz-linear-gradient(90deg, #5fa701 0%, #8dc500 100%); /* gradient fill */
background-image: -o-linear-gradient(90deg, #5fa701 0%, #8dc500 100%); /* gradient fill */
background-image: -webkit-linear-gradient(90deg, #5fa701 0%, #8dc500 100%); /* gradient fill */
background-image: linear-gradient(90deg, #5fa701 0%, #8dc500 100%); /* gradient fill */
}
<p class="test">Thanks to CSSHat I'm 10seconds button
{"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