Skip to content

Instantly share code, notes, and snippets.

@lastguest

lastguest/dabblet.css

Created April 24, 2012 12:07
Show Gist options
  • Save lastguest/2479140 to your computer and use it in GitHub Desktop.
Save lastguest/2479140 to your computer and use it in GitHub Desktop.
Download ZIP
Plastic CSS button
Raw
dabblet.css
/* Plastic CSS button */
body {
background-color: #cececa;
text-align: center;
font-size: 1.5em;
padding-top:120px;
}
.button>span {
display: inline-block;
width: auto;
padding: 0.45em;
background-color: #86a9be;
background-image: linear-gradient(top, hsl(209, 58%, 81%), hsl(196, 23%, 46%));
border-radius: 2em;
color: #fff;
font: bold 0.85em/1.0em Helvetica,Arial;
text-shadow: 0px -1px 1px rgba(0,0,0,.35);
box-shadow: 0px 1px 2px rgba(0,0,0,.75);
}
.button {
display: inline-block;
padding: 0.25em;
border-radius: 1em;
background-image: linear-gradient(top, rgba(0, 0, 0, .45), rgba(255, 255, 255, 0.50));
box-shadow: 0px -1px 2px rgba(0,0,0,.55);
-webkit-user-select: none;
cursor: pointer;
}
.button:active>span {
background-image: linear-gradient(top, hsl(209, 58%, 71%), hsl(196, 23%, 41%));
height: 0.9em;
margin-top: 0.1em;
color: #eee;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a class="button"><span>Caffeina</span></a>
Raw
settings.json
{"view":"split","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