Skip to content

Instantly share code, notes, and snippets.

@cleitonfco
Created April 23, 2012 16:04
Show Gist options
  • Save cleitonfco/2471919 to your computer and use it in GitHub Desktop.
Save cleitonfco/2471919 to your computer and use it in GitHub Desktop.
Buttons
/**
*
Buttons
*/
button {
font : bold 35px Arial, sans-serif;
width : 230px;
padding : 15px 8px 15px 60px;
position : relative;
border-radius : 10px;
letter-spacing : -2px;
}
button::after {
content : "";
left : 0;
bottom : -5px;
z-index : -5;
width : 96%;
height : 10px;
margin : 0 2%;
position : absolute;
box-shadow : 0 7px 7px 2px rgba(0, 0, 0, 0.5);
}
#drag {
color : #333;
border : 1px solid #b46c15;
box-shadow : inset 0 1px 0 #e0961b, 0 1px 0 #7e4808, 0 8px 0 #8b4d02, 0 9px 0 #583307;
text-shadow : 1px 1px 2px rgba(255, 255, 255, 0.4);
background-image : linear-gradient(bottom, #a56213 0%, #d18219 55%);
}
#drag::before {
content : "";
z-index : 5;
width : 71px;
height : 71px;
position : absolute;
left : 6px;
top : 0;
box-shadow : 1px 0 0 rgba(0, 0, 0, 0.4)
border-right : 2px solid rgba(0, 0, 0, 0.2);
background-image : url(http://dl.dropbox.com/u/1047202/technologic-icons.png), linear-gradient(-60deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.25) 100%);
background-repeat : no-repeat, no-repeat;
background-position : 9px 10px, left top;
}
<button id=drag type=button>drag it</button>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment