제출 단추에 대한 앵커 스타일을 변환 하시겠습니까?

Question

내 링크를 멋지게 보이는 버튼처럼 보이게 만드는 CSS 클래스가 있습니다. 제출 버튼에 동일한 스타일을 적용하여 동일한 모양으로 보이게하고 싶습니다. 가장 까다로운 부분은 앵커 태그가 내부에 스팬이 있어야한다는 것입니다. 양식 제출 버튼으로는 가능하지 않습니다. 그렇다면 누구나 제출 버튼을 링크와 일치시킬 수있는 방법을 알고 있습니까?

a.button { 
    background: transparent url('images/all_pages/bg_button_a.jpg') no-repeat scroll top right; 
    color: #FFF; 
    display: block; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:16px; 
    font-weight:bold; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 

a.button span { 
    background: transparent url('images/all_pages/bg_button_span.jpg') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 


a.button:hover { 
    background-position: bottom right; 
} 

a.button:hover span { 
    background-position: bottom left; 
} 

감사 : 여기

는 CSS입니다!

Answer 1

<input type="submit"> 대신 <button> 태그를 사용해보십시오. <button> 태그를 사용하면 <span>과 같은 요소를 중첩 할 수 있으며 일반적으로 훨씬 더 스타일을 자유롭게 줄 수 있습니다. :hover 스타일의,

a.button, 
button { 
    /* ... */ 
} 
a.button span, 
button span { 
    /* ... */ 
} 
a.button:hover, 
a.button:focus, 
button:hover, 
button:focus { 
    /* ... */ 
} 
a.button:hover span, 
a.button:focus span, 
button:hover span, 
button:focus span { 
    /* ... */ 
} 

접근성을 개선하기 위해 각 블록을 : 당신이 당신의 형태를 전환하면

'당신은 다음 링크와 버튼을 모두 같은 CSS를 적용 할 수 있으며, <button> 태그를 사용하는 전송 버튼 위의 내용은 :focus 상태를 포함하도록 확장되었습니다. http://particletree.com/features/rediscovering-the-button-element/

Answer 2

무엇 대신 <button type="submit"><span>Submit!</span></button> 사용에 대한 :

여기 <button> 태그를 사용하는 방법에 괜찮은 기사입니다?

또한 technique described here이 흥미로울 수 있습니다.

Answer 3

<a href="javascript: document.myform.submit()"></a> 또는 비슷한 것을 사용하여 일반 링크로 양식을 제출할 수 있습니다. 그런 다음 버튼이 필요 없습니다. :)