Skip to content

Instantly share code, notes, and snippets.

@mightymess

mightymess/dabblet.css

Created April 25, 2012 13:37
Show Gist options
  • Save mightymess/2489759 to your computer and use it in GitHub Desktop.
Save mightymess/2489759 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.button, .topButton, .innerShadow{
position:absolute;
border-radius:0;
width:300px;
height:300px;
overflow:hidden;
}
.button{
}
.innerShadow{
z-index:3;
box-shadow:inset #333 0 0 30px;
}
.topButton{
background:#666;
z-index:2;
transition: all 0.5s ease-in-out;
top:-40px;
width:300px;
height:380px;
border-radius:40px;
}
.shadow{
box-shadow:#333 0 0 30px;
}
.button:hover .topButton{
transform:translate(0, -380px);
}
.pannel{
background:#666;
width: 300px;
display:block;
height:300px;
border-radius:150px;
border:solid 1px #333;
position:absolute;
transition: all 0.8s ease-in-out;
}
.button:hover .pannel.top{
transform-origin:right center;
transform: rotate(-180deg);
}
.button:hover .pannel.right{
transform-origin:center bottom;
transform: rotate(-180deg);
}
.button:hover .pannel.bottom{
transform-origin:left center;
transform: rotate(-180deg);
}
.button:hover .pannel.left{
transform-origin:center top;
transform: rotate(-180deg);
}
.pannel.left{
left:-150px;
top:0;
}
.pannel.right{
right:-150px;
top:0;
}
.pannel.top{
top:-150px;
}
.pannel.bottom{
bottom:-150px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="button">
<div class="innerShadow">&nbsp;</div>
<div class="topButton shadow">&nbsp;</div>
<div class="pannel top shadow">&nbsp;</div>
<div class="pannel right shadow">&nbsp;</div>
<div class="pannel bottom shadow">&nbsp;</div>
<div class="pannel left shadow">&nbsp;</div>
<a href="#" class="roundBt">text</a>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment