Как сделать эффект скоса и вставки для кнопки в CSS 3 для браузеров на основе веб-набора? - PullRequest
Новая
       50

Как сделать эффект скоса и вставки для кнопки в CSS 3 для браузеров на основе веб-набора?

39 голосов
/ 22 апреля 2011

Как сделать эффект скоса и наложения на Отправить кнопку в CSS 3?

Вот так.

enter image description here

Увеличенное изображение enter image description here

Я рассматриваю только браузеры на основе Web-kit . и Я не спрашиваю о том, как задать угол и как задать градиент для кнопки, я спрашиваю только об эффекте скоса

Html 

<input type="submit" value="Submit your entry" class="input" />

1 Ответ

138 голосов
/ 24 апреля 2011

Это возможно без использования дополнительной наценки за счет использования нескольких теней: 

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/

...