Skip to content

Instantly share code, notes, and snippets.

@cleitonfco
Created April 30, 2012 19:30
Show Gist options
  • Save cleitonfco/2561873 to your computer and use it in GitHub Desktop.
Save cleitonfco/2561873 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;
display: block;
margin: 30px 0;
}
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, #trash {
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, #light::before, #trash::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;
}
#light {
color : #333;
border : 1px solid #b46c15;
box-shadow : inset 0 1px 0 #f43837, 0 1px 0 #de3a39, 0 8px 0 #6d0607, 0 9px 0 #7d1617;
text-shadow : 1px 1px 2px rgba(255, 255, 255, 0.4);
background-image : linear-gradient(bottom, #ba1211 0%, #e21615 55%);
}
#light::before {
background-position : 9px -190px, left top;
}
#trash {
border : 1px solid #9ca53a;
box-shadow : inset 0 1px 0 #c8dc61, 0 1px 0 #cbde75, 0 8px 0 #4b5806, 0 9px 0 #9ca53a;
background-image: linear-gradient(bottom, #809423 50%, #9eb62c 50%);
}
#trash::before {
background-image : url(http://dl.dropbox.com/u/1047202/technologic-icons.png), radial-gradient(left, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 120%);
background-position : 9px -390px, left top;
}
#trash:active {
margin-top : 35px;
box-shadow : inset 0 1px 0 #c8dc61, 0 1px 0 #cbde75, 0 3px 0 #4b5806, 0 4px 0 #9ca53a;
}
#trash:active::after {
bottom : 3px;
height : 5px;
box-shadow : 0 7px 7px 2px rgba(0, 0, 0, 0.5);
}
.no-bggradient #trash {
background: url(../img/gradient-button.png) no-repeat;
}
<button id=drag type=button>drag it</button>
<button id=light type=button>think it</button>
<button id=trash type=button>trash it</button>
{"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