Skip to content

Instantly share code, notes, and snippets.

@lastguest
Created July 9, 2012 19:10
Show Gist options
  • Select an option

  • Save lastguest/3078294 to your computer and use it in GitHub Desktop.

Select an option

Save lastguest/3078294 to your computer and use it in GitHub Desktop.
Frizzantissimo
/**
* Frizzantissimo
*/
body {
background-color: #D0CACA;
text-size: 20px
}
button {
font-size: 30px;
}
@keyframes bubbles {
from {
background: url(http://dl.dropbox.com/u/609946/cdn/bubbles.png) 0 256px repeat-x;
}
50% {
background: url(http://dl.dropbox.com/u/609946/cdn/bubbles.png) 0 -256px repeat-x;
}
to {
background: url(http://dl.dropbox.com/u/609946/cdn/bubbles.png) 0 -512px repeat-x;
}
}
.btn-lava {
display: inline-block;
height: 4em;
padding-left: 1em;
padding-right: 1em;
color: #666;
border: 0.15em solid #666;
border-radius: 6em;
box-shadow: inset 0px 5px 20px rgba(236, 234, 147, 0.75);
background-clip: padding-box;
animation: bubbles 5s linear infinite;
box-shadow: inset 0px -2px 2px -1px rgba(255, 255, 255, 0.60), 0px 2px 5px -2px black, inset 0px -15px 4px 0px rgba(95, 83, 83, 0.10), inset 0px 5px 10px 0px white;
text-shadow: 1px 1px 1px white;
padding: 5px 20px;
margin: 5px 5px;
border-color: rgba(255, 255, 255, 0.65);
border-width: 1px;
border-style: solid;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.btn-lava:hover {
box-shadow: inset 0px 2px 2px -1px rgba(255, 255, 255, 0.60),
inset 0px -15px 24px 0px rgba(95, 83, 83, 0.10),
inset 0px 5px 20px 0px white,
0px 0px 20px 2px white;
}
<!-- content to be placed inside <body>…</body> -->
<button class="btn-lava">Frizzantissimo</button>​​​​​​​​​​​​​​
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment