Skip to content

Instantly share code, notes, and snippets.

@lorenzoferrante

lorenzoferrante/dabblet.css

Created January 4, 2013 20:25
Show Gist options
  • Save lorenzoferrante/4455705 to your computer and use it in GitHub Desktop.
Save lorenzoferrante/4455705 to your computer and use it in GitHub Desktop.
Download ZIP
Nice buttons
Raw
dabblet.css
/*
Nice buttons
*/
html {
min-height: 100%;
background: linear-gradient(#d5e6ea, #fff);
font-family: 'Lato', sans-serif;
padding-top: 40px;
}
h1 {
color: #444;
text-align: center;
padding-bottom: 20px;
}
.container {
margin: 0 auto;
margin-top: 40px;
width: 600px;
max-width: 80%;
height: auto;
}
a {
text-decoration: none;
color: #555;
}
.btn {
margin-right: 7px;
}
#btn-1 {
background: linear-gradient(#cfcfcf, #e6e6e6);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #9e9e9e;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-1:hover {
background: linear-gradient(#e6e6e6, #cfcfcf);
}
#btn-2 {
color: #fff;
background: linear-gradient(#467ed2, #86a3d0);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #4d6c99;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-2:hover {
background: linear-gradient(#86a3d0, #467ed2);
}
#btn-3 {
color: #fff;
background: linear-gradient(#ca4c4c, #c06767);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #b14748;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-3:hover {
background: linear-gradient(#c06767, #ca4c4c);
}
#btn-4 {
color: #fff;
background: linear-gradient(#56cf25, #a0d78a);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #63a748;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-4:hover {
background: linear-gradient(#a0d78a, #56cf25);
}
#btn-5 {
color: #;
background: linear-gradient(#e1eb2e, #e9eda0);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #aeb631;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-5:hover {
background: linear-gradient(#e9eda0, #e1eb2e);
}
#btn-6 {
color: #fff;
background: linear-gradient(#c46cd1, #c98ad2);
padding: 14px 30px;
border-radius: 5px;
border: 1px solid #9a64a2;
box-shadow: inset 0 1px rgba(255,255,255, .4);
}
#btn-6:hover {
background: linear-gradient(#c98ad2, #c46cd1);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<h1>NICE BUTTONS</H1>
<div class="container">
<a href="#" class="btn" id="btn-1">Check out this CSS</a>
<a href="#" class="btn" id="btn-2">Check out this CSS</a>
<a href="#" class="btn" id="btn-3">Check out this CSS</a>
</div>
<div class="container">
<a href="#" class="btn" id="btn-4">Check out this CSS</a>
<a href="#" class="btn" id="btn-5">Check out this CSS</a>
<a href="#" class="btn" id="btn-6">Check out this CSS</a>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"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