웹 페이지에서 사용되는 Button은 그 목적에 따라 명확하게 3가지로 구분할 수 있으며 HTML 마크업은 각각 다릅니다. 자원을 참조하기 위한 a 엘리먼트, 인터페이스 조작을 위한 button 엘리먼트, 서식 전송을 위한 input 엘리먼트가 바로 그것입니다.

1. a : URI를 ‘연결‘하기 위한 버튼으로서 <a href="#uri"> 형식으로 마크업 합니다.
2. button : URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 합니다. type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.
3. input : 사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 <input type="submit">, <button type="submit"> 엘리먼트로 마크업 합니다.

아래 준비된 예제는 버튼의 ‘목적‘과 ‘형태‘에 따라 다양한 HTML Markup 과 CSS 표현이 있음을 보여주고 있습니다. 텍스트 기반의 가변폭 버튼 표현은 좌우 2개의 이미지가 배치되어야 하는데 현재 활성 버전의 CSS 2.x에서는 Multiful Background Images와 같은 문법을 지원하지 않기 때문에(정확히 말하면 아직 브라우저들이 CSS3를 지원하지 않기 때문에) 부득이 표현을 위한 span 엘리먼트가 사용 되었습니다. IE 5.5~7, Firefox 2~3, Safari 3.x, Opera 9.x, Chrome Beta 브라우저에서의 호환성이 확보되어 있습니다.

[ 예제를 새창으로 보기 | CSS 보기 | Image 보기 White, Black, Green, Blue, Red ]

버튼의 목적을 명확하게 판단한 뒤 알맞는 엘리먼트를 사용하는 것은 접근성을 향상시켜 줍니다. 최근에는 Javascript를 지원하지 않는 브라우저 환경이 드물지만 되도록 Javascript에만 의존하여 기능을 수행하지 않도록 하는 것이 좋습니다. 특히 Link Button을 이용하여 Form을 전송하는 기능을 구현하면 Javascript를 지원하지 않는 환경에서의 상호 운용성을 확보하지 못하고 화면낭독기 장치를 이용하는 사람들의 접근성을 떨어 뜨리게 됩니다. Form 페이지의 전송 버튼을 ’submit’ 버튼 대신 ‘a’  버튼으로 마크업 하는 경우 화면 낭독기는 HTML기반으로 내용을 읽어 주기 때문에 이것을 ‘~링크’라고 읽어 주고 시각장애인은 이것을 ‘~전송 버튼’이라고 확신할 수 없는 문제가 발생 합니다.

제시된 예제는 다국어 환경의 웹 서비스에 적합하도록 텍스트 기반으로 디자인 되었으며 텍스트의 양에 따라 버튼의 너비가 가변적으로 변합니다. 색상별로 하나의 버튼 이미지를 이용하여 다양한 너비와 높이에 대응할 수 있도록 설계되어 있습니다. 이 버튼 스타일은 곧 공개될 Zeroboard XE 게시판의 1.0.7 버전에 대한 기본 테마로 탑재될 예정 입니다. 제로보드를 사용하시는 분들께서는 기본 버튼 스타일이 마음에 들지 않으실 경우 예제를 참고하여 간단하게 다양한 스타일로의 변경이 가능하고 현재의 스타일을 이용한 재 창작도 얼마든지 가능 합니다.

[출처] http://naradesign.net/wp/2008/10/31/203/