Skip to content

Instantly share code, notes, and snippets.

@mightymess

mightymess/dabblet.css

Created February 20, 2012 16:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mightymess/1869961 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mightymess/1869961 to your computer and use it in GitHub Desktop.
Download ZIP
Soundcloud is Gold round Bt all css3 test
Raw
dabblet.css
/**
* Soundcloud is Gold round Bt all css3 test
*/
.roundBt{
width:80px;
height:80px;
position:relative;
left:9px;
top:7px;
border:solid 1px #609eb0;
display:block;
border-radius:40px;
transition: all 0.2s ease-in-out;
background: linear-gradient(bottom, rgb(218,232,246) 25%, rgb(8,207,220) 100%);
box-shadow: 0 5px 4px #666, inset 0px 0px 10px #78cfdc, inset 0px 0px 5px #78cfdc, inset 0px 6px 1px #fff,inset 0 -4px 5px #8da2af;
}
.roundBt:active{
transform: translate(0, 3px);
box-shadow: 0 0px 0px #333, inset 0px 4px 10px #333, inset 0px -4px 4px #78cfdc, inset 0 -7px 5px #fff;
border:solid 1px #609eb0;
}
.roundBtFrame{
width:100px;
height:100px;
border-radius:50px;
background: linear-gradient(bottom, rgb(220, 220, 220) 20%, rgb(250, 250, 250) 40%, rgb(230, 230, 230) 70%, rgb(250, 250, 250) 100%);
border:solid 1px #CCC;
position:absolute;
box-shadow:0 5px 4px #666;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#" class="roundBtFrame"><span class="roundBt"></span></a>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment