Skip to content

Instantly share code, notes, and snippets.

@mightymess

mightymess/dabblet.css

Created February 21, 2012 18:25
Show Gist options
  • Save mightymess/1877971 to your computer and use it in GitHub Desktop.
Save mightymess/1877971 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;
margin:20px auto 0;
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:relative;
display:block;
box-shadow:0 5px 4px #666;
}
.indentBox{
background:#efefef;
width:150px;
height:180px;
border-radius:15px;
background: linear-gradient(bottom, rgb(220, 220, 220) 20%, rgb(250, 250, 250) 40%, rgb(230, 230, 230) 70%, rgb(250, 250, 250) 100%);
display:block;
border:solid 1px #ccc;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #333;
}
.indentBox .label{
font-family: Verdana;
color:#609eb0;
font-size:105%;
text-align:center;
width:100%;
display:block;
margin:0;
margin-top:18px;
text-shadow: 0px -1px 0px #416c77, 0 1px 0px #fff;
font-smooth:always;
letter-spacing:1px;
padding:0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="indentBox">
<a href="#" class="roundBtFrame"><span class="roundBt"></span></a>
<span class="label">push it</span>
</div>
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