40

How to make bevel and Embosed effect to Submit button in CSS 3 ?

Like this.

enter image description here

Enlarged Imageenter image description here

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" />
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    Probably not possible without an additional surrounding element - but I can be wrong. Interested to see what comes up. – Pekka Apr 22 '11 at 10:25
  • @pekka - if you know how to make this possible with an surrounding element, tell me. – Jitendra Vyas Apr 22 '11 at 10:38
  • 1
    It *should* be possible with a surrounding element with `box-shadow: inset ......`, creating the outer shadow, and an inner element with the gradient etc., and a normal `box-shadow`. It's fairly complex to do though, will require a lot of fiddling until it looks good. – Pekka Apr 22 '11 at 10:44
  • @Pekka - please try here http://jsfiddle.net/vGHXg/1/ – Jitendra Vyas Apr 22 '11 at 11:00
  • 1
    here's a starting point: http://jsfiddle.net/vGHXg/19/ – Pekka Apr 22 '11 at 11:06

1 Answers1

147

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*/

enter image description here

http://jsfiddle.net/NPXfe/

Chiramisu
  • 4,687
  • 7
  • 47
  • 77
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • sexy button, but your comments are incorrect. "top internal highlight" and "bottom internal shadow" are backwards. an explanation of the 3 values would also be helpful..I'm trying to figure out what the 0 is in place of. – mpen Jun 20 '12 at 16:42
  • 1
    Fixed, the 0 is the x position of the shadow (relative to the element). http://www.css3.info/preview/box-shadow/ – methodofaction Jun 20 '12 at 23:02
  • @Martin in that case you can always add a parent element and apply the inset box shadows to it. – methodofaction Mar 01 '13 at 22:56
  • Of course, but those looking for a semantic html friendly way to do this might not realize that at first. Also, your answer implies that all is needed is this box shadow. – xyhhx Mar 01 '13 at 22:58
  • @Martin so your solution is...? You could hack your way out with pseudo-elements but that's too much of a compromise for semantic code. – methodofaction Mar 02 '13 at 03:26
  • My solution would be exactly as you described *in your comments*. I'm just saying you might want to be more clear in your answer body, for those who are skimming through. They might believe they can accomplish what is desired with just a `box-shadow`, since that's what you answer suggests. – xyhhx Mar 04 '13 at 19:30