Skip to content

Instantly share code, notes, and snippets.

@davidmerrique

davidmerrique/dabblet.css

Created February 4, 2012 16:02
Show Gist options
  • Save davidmerrique/1738702 to your computer and use it in GitHub Desktop.
Save davidmerrique/1738702 to your computer and use it in GitHub Desktop.
Download ZIP
Hello Dribbble!
Raw
dabblet.css
/**
* Hello Dribbble!
*/
* { box-sizing: border-box; }
html {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: #fff;
min-height:100%;
text-align: center;
padding-top: 200px;
font-smoothing: antialiased;
}
a { text-decoration: none; }
.button {
display: inline-block;
margin: 0 auto;
padding: 15px 30px 20px 30px;
position: relative;
box-sizing: border-box;
background: linear-gradient(top, #f873a4, #ea4c88);
color: #fff;
font-weight: bold;
font-size: 16px;
text-shadow: 0 2px 0 rgba(0,0,0,0.3);
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0 3px 5px rgba(0,0,0,0.3),
inset 0 1px 0 0 rgba(255,255,255,0.5),
inset 0 -5px 0 0 rgba(0,0,0,0.2);
transition: all 0.2s ease-in-out;
}
.button:hover {
background: linear-gradient(top, #ff75a9, #f24d8c);
}
.button:active {
padding: 15px 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3),
inset 0 1px 0 0 rgba(255,255,255,0.5);
transform: translate(0, 5px);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a class="button" href="">Hello Dribbble!</a>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment