버튼의 스킨을 변경하는 방법

Question

안녕 모두 버튼과 textArea 스킨의 스킨 (모양)을 다른 것으로 변경하려고합니다. 두 번째 사진과 같은 것이 있습니다.

Answer 1

이 할 수있는 하나 이상의 가능성이있어 :

모든 브라우저에서 배경 이미지 (작품 사용을하지만, 나는 개인적으로 재 편집하고 모든 작은을위한 이미지 파일을 저장하고 싶지 않아요 상세 다시) CSS :

button { 
    background: url('some image..'); 
    width: <width of the background image>; 
    height: <height of the background image>; 
    ... 
} 

button:hover { 
    background: url('mouseover image'); 
    ... 
} 

은 또한 당신이 버튼을 만들기 위해 새로운 CSS 속성을 사용할 수 있습니다. 그들은 당신이 원하는 모든 것을 제공하며 배경 이미지를 사용하는 것보다 WAY 쿨러이지만, 단점은없는 많은 브라우저가이를 지원 완전히 오늘 (일부는 오랜 시간 동안, IE 그래, 난 당신을 의미하지 않습니다) :

button { 
    border: solid 1px somecolor; 
    color: #eee; 
    border-radius:5px; 
-moz-border-radius:5px; 
    background: -moz-linear-gradient(top, #5E5E5E 0%, #474747 51%, #0a0e0a 51%, #0a0809 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5E5E5E), color-stop(51%,#474747), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); 
} 
button:hover { 
    color: white; 
} 

• http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy

,536,913 : 순수 CSS3를 사용하여 무엇이 가능한지의 http://www.colorzilla.com/gradient-editor/

노출 및 자습서 :

CSS의 그라디언트를 만들려면 여기를 봐

• http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/ (독일어, 그러나 어이, 당신은 할 수 이 버튼을 볼 수 있으며 CSS를 neverthenless를 읽을 수 있습니다), 수 있습니다

• 간단한 예를 들어 당신이 필요 : http://capturedsparks.com/pure-css3-buttons/

당신은 텍스트 영역 스타일링을 위해 그들에게 같은 속성을 사용할 수 있습니다 : 등 글꼴 색상 border, background, color을

Answer 2

<button type="submit" style="border: 0; background: transparent"> 
    <img src="/images/Btn.PNG" width="90" heght="50" alt="submit" /> 
</button> 

Answer 3

당신은 바닥에 스타일을 적용하거나 같은 HTML 태그를 제출할 수 있습니다

.mybotton{ 
    background-image: url(buttonimage.png); 
} 

: 배경 이미지를 추가 할 수 있습니다 이러한 방법으로

<input type="submit" class="mybotton" value="Continue" /> 

감사합니다!

Answer 4

유 정확히 u는 위에서 설명한 동일한 디자인이 다음 그냥 그런 식으로 작성 본 적이이

<input type="image" src="submitbutton.png" />