Skip to content

Instantly share code, notes, and snippets.

@mstalfoort

mstalfoort/dabblet.css

Forked from vasilisvg/dabblet.css
Created November 24, 2012 16:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mstalfoort/4140374 to your computer and use it in GitHub Desktop.
Save mstalfoort/4140374 to your computer and use it in GitHub Desktop.
Download ZIP
Hover button
Raw
dabblet.css
/**
* Hover button
*/
a {
font: 2em arial;
display: inline-block;
text-decoration: none;
color: #fff;
margin: 2em 0 0 2em;
padding: .5em;
border-radius: .3em;
box-shadow: .1em .1em .1em #333;
background: #1e5799;
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
a:hover {
background: #7db9e8;
box-shadow: .1em .1em .2em #333;
background: linear-gradient(to bottom, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%);
}
p {
display: none;
opacity: 0;
margin: 1em 0 0 4em;
transition: .3s;
}
a:hover + p {
opacity: 1;
display: block;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="http://vasilis.nl/">Hover and click me!</a>
<p>This text explains things</p>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment