开发者

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

开发者 https://www.devze.com 2023-02-27 18:48 出处:网络
How to make bevel and Embosed effect to Submit button in CSS 3 ? Like this. Enlarged Image I\'m only cons开发者_如何转开发idering Web-kit based browsers. and I\'m not asking about How to give rou

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

Like this.

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

Enlarged Image

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

I'm only cons开发者_如何转开发idering 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*/

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

http://jsfiddle.net/NPXfe/

0

精彩评论

暂无评论...
验证码 换一张
取 消