웹사이트를 다니다 보면 여러 종류의 버튼들을 쉽게 만날 수 있다. 버튼을 이용하는 방법은 button 태그를 이용하기도 하고 a 태그를 이용해 테두리를 만들어 박스형으로 만들기도 한다. 검색해 보면 버튼 만드는 방법은 여러 블로그들에서 자세히 설명하고 있으니 참고해서 만들면 된다.

버튼의 역할

버튼은 링크 태그를 이용해 다른 글로의 이동을 유도하기도 하고 기능을 수행하는 버튼이나 글 내용을 버튼 형태로 만들어 눈에 띄게 만드는데 사용되기도 한다. 웹 사이트에서는 사용하지 않는 곳이 없을 정도로 필수라 할 수 있다.

이 블로그에도 각자의 기능을 하는 버튼이 다양하게 활용되고 있다.

버튼의 가장 큰 역할은 주소 이동으로 제한된 화면의 공간을 최대한 활용할 수 있게 하는 것이라고 생각한다.

버튼의 종류

버튼의 모양은 가장 간단한 네모 박스형에서부터 원형, 타원형, 마름모형, 육각형 형태 등 다양하게 꾸밀 수 있다.

모양 뿐만 아니라 배경 색이나 경계 선 등을 이용해서도 여러가지 모양을 만들 수 있다.

버튼의 마우스 오버 효과를 추가한다거나 배경의 애니메이션 효과를 활용하기도 한다.

선호 버튼의 변화

버튼의 선호 형태도 시간이 지남에 따라 계속 변하고 있다.

처음에는 양쪽 모서리가 타원형인 형태의 버튼을 사용했다.

다음에는 끝에 모서리만 둥근 형태의 박스를 사용했다.

2. 모서리 둥근 버튼

그 다음에 원형의 버튼을 사용하기도 하고... 배경색도 다양한 마우스 오버 효과를 넣어서 해보기도 했다.


한때는 클립아트의 벡터 이미지를 활용해서 버튼을 사용하기도 했다.

3. 클립아트 박스 버튼


4. 클립 아트를 활용한 버튼


근데 점점 단순한게 좋아진다. 박스 형태도 귀찮다. 텍스트만 보이는 형태의 버튼이 심플한게 더 마음에 든다.

배경색도 사용하지 않는게 좋다. 투명해야 다른 배경을 방해하지 않는다. 튜닝의 완성은 순정이라고 했던가...

결국 돌아 돌아 제자리로 돌아왔다.

5. 심플 버튼