Pure CSS3 Buttons
24 Jul 2011 20:49
These are some CSS3 Buttons, each button comes with a Regular state, Hover state, and Active state.
/* Forrest Green Button */ .yourclassnamehere a { float: left; margin-right: 15px !important; margin: 0; padding: 5px 20px 6px 20px; font-family: Tahoma, Arial, sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); background: #335D30; background: -moz-linear-gradient(top,#4A7746 0,#335D30 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#4A7746),color-stop(100%,#335D30)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#4A7746',endColorstr='#335D30',GradientType=0); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); border: none; color: #e3e3e3; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; text-decoration: none; letter-spacing: 1px; position: relative; } .yourclassnamehere a:hover { background: #336B30; background: -moz-linear-gradient(top,#4A8546 0,#336B30 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#4A8546),color-stop(100%,#336B30)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8546',endColorstr='#336B30',GradientType=0); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); color: #f5f5f5; } .yourclassnamehere a:active { background: #335D30; background: -moz-linear-gradient(top,#335D30 0,#4A7746 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#335D30),color-stop(100%,#4A7746)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#335D30',endColorstr='#4A7746',GradientType=0); -webkit-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); -moz-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); color: #e3e3e3; border: none; } /* Pink Button */ .your2ndclassnamehere a { float: left; margin-right: 15px !important; /* For Testing Purposes */ margin: 0; padding: 5px 20px 6px 20px; font-family: Tahoma, Arial, sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); background: #ea4c89; background: -moz-linear-gradient(top,#e989ae 0,#ea4c89 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e989ae),color-stop(100%,#ea4c89)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#e989ae',endColorstr='#ea4c89',GradientType=0); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); border: none; color: #e3e3e3; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; text-decoration: none; letter-spacing: 1px; position: relative; } .your2ndclassnamehere a:hover { background: #ea90b3; background: -moz-linear-gradient(top,#ea90b3 0,#eb5891 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ea90b3),color-stop(100%,#eb5891)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#ea90b3',endColorstr='#eb5891',GradientType=0); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35); color: #f5f5f5; } .your2ndclassnamehere a:active { background: #e989ae; background: -moz-linear-gradient(top,#ea4c89 0,#e989ae 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ea4c89),color-stop(100%,#e989ae)); filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#ea4c89',endColorstr='#e989ae',GradientType=0); -webkit-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); -moz-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50); color: #e3e3e3; border: none; }
Just change the color scheme to change the colors of the buttons. I made it very simple for everyone.
View the Demo: http://jsfiddle.net/526hz/
Original URL: http://www.icondeposit.com/code:pure-css3-buttons
License Info: Creative Commons Attribution Share-Alike 3.0
Thank you for sharingg! I was wondering how the inset shadow was done. Now i know how =)