How to make bevel and Embosed effect to Submit button in CSS 3 ?
Like this.
Enlarged Image
I'm only considering Web-kit based browsers. and I'm not asking about How to give round corner and how to give gradient to button, I'm only asking about bevel effect
Html
<input type="submit" value="Submit your entry" class="input" />
This is possible without the use of extra mark-up through the use of multiple box-shadows:
box-shadow:
0 1px 2px #fff, /*bottom external highlight*/
0 -1px 1px #666, /*top external shadow*/
inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
http://jsfiddle.net/NPXfe/