How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

css mobile-webkit
Jitendra Vyas picture Jitendra Vyas · Apr 22, 2011 · Viewed 79.6k times · Source

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

Answer

methodofaction picture methodofaction · Apr 24, 2011

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/

Related questions

How to flip background image using CSS?

How to flip any background image using CSS? Is it possible? currenty I'm using this arrow image in a background-image of li in css On :visited I need to flip this arrow horizontally. I can do this to make another …

Read More
Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute: list-style-image And then giving it a URL. However, in my case, I just want to use the '+' symbol. I don't want …

Read More
CSS submit button weird rendering on iPad/iPhone

I noticed that if I style my buttons with CSS using radius, colors and borders, they look good but in the iphone/ipad/ipod they look terrible...shouldn't be the same rendering as in Safari Desktop??

Read More