<style> button { margin-top: 60px; } button.punch { background: #4162a8; border-top: 1px solid #38538c; border-right: 1px solid #1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid #1f2d4d; border-radius: 4px; -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; color: #fff; font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 10px; padding: 10px 0 12px 0; text-align: center; text-shadow: 0px -1px 1px #1e2d4d; width: 150px; -webkit-background-clip: padding-box; } button.punch:hover { -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; cursor: pointer; } button.punch:active { -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; margin-top: 58px; } </style> <br> <button class="punch">Send</button> <button class="punch">Preview</button> <button class="punch">Cancel</button>
Monday, December 10, 2012
CSS JQuery buttons
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment