2011-04-22 2 views
38

베벨 및 삽입 된 효과를 만드는 방법 CSS3의 버튼을 제출 하시겠습니까?웹 키트 기반 브라우저의 경우 CSS 3에서 버튼에 베벨 및 삽입 효과를 적용하는 방법은 무엇입니까?

이렇게하면됩니다.

enter image description here

확대 된 이미지 enter image description here

난 단지 웹 키트 기반 브라우저를 고려 중이 야. 및 을 나는

HTML을

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

주변 요소를 추가하지 않아도 가능하지 않을 수 있습니다.하지만 잘못 될 수 있습니다. 무슨 일이 일어나는지보고 싶다. –

+0

@pekka - 주변 요소로이 작업을 수행하는 방법을 알고 있다면 알려주세요. –

+1

'box-shadow : inset ...... '를 가진 주변 요소로 가능해야하며, 바깥 쪽 그림자와 내부 요소를 그라디언트 등으로 만들고 정상적인 상자 그림자를 만들어야합니다. 그것은 꽤 복잡하지만,보기 좋게 보일 때까지 많은 바이올린을 요구할 것입니다. –

답변

135

이 사용하지 않고 수를 버튼에 그라데이션을 제공하는 방법을, 나는 단지 경사 효과에 대해 부탁 해요 둥근 모서리를 제공하는 방법에 대해 물어 아니에요

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

,691,363 : 여러 상자 - 그림자의 사용을 통해 여분의 마크 업210

+1

Duopixel - +10 굉장한 –

+0

섹시한 버튼이지만 댓글 잘못된 것입니다. "위쪽 내부 강조 표시"및 "아래쪽 내부 그림자"는 뒤로 향합니다. 3 가지 값에 대한 설명도 도움이 될 것입니다. 저는 0이 무엇인지 알아 내려고 노력하고 있습니다. – mpen

+1

고정되어있는 0은 (요소를 기준으로 한) 그림자의 x 위치입니다. http://www.css3.info/preview/box-shadow/ – Duopixel