Skip to content

Instantly share code, notes, and snippets.

Created October 20, 2012 15:38
Show Gist options
  • Save anonymous/3923615 to your computer and use it in GitHub Desktop.
Save anonymous/3923615 to your computer and use it in GitHub Desktop.
CSS3 borders and box-shadow experiment
/**
* CSS3 borders and box-shadow experiment
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
button {margin:40px;}
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #050505;
padding: 300px 200px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background-color: #ebebeb;
/*background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));*/
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px 10px 8px 0px;
/* border: 2px solid #949494;
*/
border-top:1px solid #949494;
border-right:3px double #949494;
border-bottom:2px double #949494;
border-left:1px solid black;
-moz-box-shadow:
0px 2px 3px rgba(000,000,000,1),
inset -3px -2px 5px rgba(148,138,148,0.5);
-webkit-box-shadow:
0px 2px 3px rgba(000,000,000,1),
inset -3px -2px 5px rgba(148,138,148,0.5);
box-shadow:
5px 5px 10px rgba(000,000,000,1),
inset -6px -5px 7px rgba(148,138,148,0.5);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}​
<!-- content to be placed inside <body>…</body> -->
<button type="button" name="" value="" class="css3button">submit</button>​
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment