Skip to content

Instantly share code, notes, and snippets.

@asaskevich

asaskevich/dabblet.css

Created August 16, 2014 11:44
Show Gist options
  • Save asaskevich/b4d5d58ab0b2ffde18e6 to your computer and use it in GitHub Desktop.
Save asaskevich/b4d5d58ab0b2ffde18e6 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
* {
background-color: #A9B6C7;
}
#buttons {
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 450px;
height: 100px;
text-align: center;
font-size : 30px;
}
.btn {
width: 65px;
height: 45px;
background: linear-gradient(#F6FAFD, #EDF0F5, #E7F0F9, #DDE6EF, #CAD2DD);
display: inline-block;
margin-left: 0px;
margin-right: -8px;
border-left: 1px solid #B0B8C5;
box-shadow: 2px 2px 2px 1px #4C667F;
color: #426895;
}
.left {
border-radius: 12% 0% 0% 12%;
}
.right {
border-radius: 0% 12% 12% 0%;
}
.btn:hover {
background: linear-gradient(#AAC8EA, #A4C1E1, #9EBBDD, #9AB8DC, #94B2D6, #86A7D0);
color: #FBFBFF;
}
i {
width: 55px;
height: 31px;
background: inherit;
padding-top: 14px;
font-size: 24px;
color: inherit;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> --><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="buttons">
<div class="btn left"><i class="fa fa-home"></i></div>
<div class="btn"><i class="fa fa-heart-o"></i></div>
<div class="btn"><i class="fa fa-comments"></i></div>
<div class="btn right"><i class="fa fa-cloud"></i></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
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