버튼 제너레이터 (Button Generator) 이용해서 버튼 HTML 코드 만들기

버튼 제너레이터 사이트를 이용하면 여러가지 버튼의 HTML코드를 간단하게 얻을 수 있는데요.
이번 포스팅은 버튼 제너레이터의 상세 설정법에 대해서 알아보겠습니다. 여러가지 설정으로 딱 맞는 형태의 버튼을 만들어 보겠습니다.

버튼 제너레이터 (Button Generator) 사이트

우선 사이트에 접속을 해보면 크게 세부분으로 나누어져 있는 것을 볼수 있습니다.

왼쪽은 여러가지 버튼모양이 나열되어 있어서 원하는 모양이 있다면 크게 수정하지 않고 바로 적용을 시켜서 코드를 얻을수 있습니다.

가운데 부분은 현재 적용된 이미지를 미리 볼수 있는 창이 있습니다.

오른쪽 부분은 상세한 수치를 적용할 수 있는 창이 있습니다.

중앙부분의 미리보기 이미지 아래쪽의 작은 사각형으로 버튼의 색상을 조절 할 수 있습니다.
배경색상, 테두리, 마우스를 올렸을때의 색상등 전부 조절이 가능합니다.

텍스트 조정창에서는 버튼의 텍스트, 폰트를 조정할 수 있습니다.
당연히 폰트의 사이즈 조절도 가능하고요. 굵은 서체 적용, 이탤릭체 적용 등을 설정합니다.

버튼의 높이(Vertical) 와 너비(Horizontal) 를 조절합니다.

버튼의 외곽선 두께를 설정하고 버튼 모서리의 곡률을 조정할 수 있습니다.

버튼의 그림자에 대한 설정을 합니다. 그림자의 크기, 거리, 흐림 정도 와 안쪽 그림자 등등 여러가지 설정이 가능합니다.

마지막으로 텍스트의 그림자의 설정을 조절 할수 있는 설정 메뉴입니다.

그림자의 크기, 위치 등을 설정 할 수 있습니다.

원하는 모양이 완성이 되었으면 코드를 만들어 보겠습니다.
코드 만드는 방법은 아주 간단합니다. 미리보기 를 클릭하거나 미리보기 우측하단의 Get Code를 클릭하면 지금까지 설정된 버튼의 코드가 나타나게 됩니다.

여기에 있는 코드를 이용해서 간단하게 버튼의 모양을 변경하시면 됩니다.

설정된 버튼 코드를 설정하는 방법은 아래 링크로 이동해서 살펴보시면 됩니다.