CSS버튼을 쉽게 만들어주는 CSS버튼제네레이터 사이트

 

블로그에 붙일 나만의 버튼스타일 만들기

 

블로그나 홈페이지를 운영할때 그냥 글자에 링크를 넣는것보다는 시인성이 좋고 깔끔해보이는 버튼을 이용해서 시각적으로 있어보이게 만들어주는 CSS코드가 있습니다. 이 코드는 직접 작성하려면 html이나 css코드를 모르면 전혀 작성할수가 없죠. 티스토리블로그나 워드프레스를 사용하는 분들이라면 이런 코드를 몰라도 버튼을 넣고싶은 분들이 많이 있잖아요. 이럴때 유용하게 사용해볼 수 있는 CSS버튼의 코드를 자동으로 만들어주는 사이트를 소개해 드리려고 합니다.

 

 

 

 

CSS버튼제네레이터

 

사이트이름 자체가 CSS버튼제네레이터라는 사이트입니다. 버튼생성사이트라는거죠. 직관적이고 옵션을 조절하는대로 바로 실시간으로 버튼의 모양을 바로 확인할 수 있어서 초보자도 쉽게 활용이 가능한 사이트입니다. 아래의 링크버튼을 누르고 홈페이지로 이동하세요.

 

 

🔗 사이트 바로가기

 

 

 

사용방법

 

버튼제네레이터 사이트의 구성을 보면 좌측에는 버튼을 직접 내마음에 맞게 조절하는 입력부와 우측에는 조절하는대로 실시간으로 버튼을 확인할 수 있는 프리뷰화면이 있고 그 아래에는 시각적으로 보여지는 버튼의 CSS코드를 자동으로 만들어주는 코드블럭으로 나눠져 있습니다.

 

 

 

1. 폰트 / 텍스트 메뉴 (Font / Text)

1번 : 버튼에 쓰일 글자를 입력할 수 있습니다.

2번 : 폰트 스타일을 선택할 수 있습니다.

3번 : 버튼에 쓰일 글자의 색상을 선택할 수 있습니다. 

4번 : 글자의 크기를 선택할 수 있습니다.

5번 : 글자의 그림자 효과를 선택할 수 있습니다.

 

 

 

 

2. 박스 (Box)

1번 : 버튼의 그림자효과를 적용하는 메뉴입니다.

2번 : 글자를 기준으로 버튼의 크기를 사방으로 한번에 키워주는 옵션입니다.

3번 : 버튼의 위쪽크기가 늘리거나 줄이는 옵션입니다.

4번 : 버튼의 오른쪽크기가 늘리거나 줄이는 옵션입니다.

5번 : 버튼의 아래쪽크기가 늘리거나 줄이는 옵션입니다.

6번 : 버튼의 왼쪽크기가 늘리거나 줄이는 옵션입니다.

 

 

 

 

3. 보더 (Border) 

버튼의 모퉁이를 둥글게 표현하거나 사각형형태로 표현하는등의 옵션을 정할 수 있습니다.

1번 : 모퉁이를 둥글게 표현하는 옵션을 정할 수 있습니다.

2번 : 버튼의 테두리를 정하는 옵션입니다. 색상,선두께 등을 정할 수 있습니다.

 

 

 

 

4. 배경 (Backfround)

1번 : 버튼의 기본색상을 정하는 옵션입니다.

 

 

 

 

5. 호버 (Hover)

1번 : 버튼에 마우스를 올렸을때 변하는 색상을 정하는 옵션입니다.

 

 

 

 

여기까지 버튼의 옵션을 설정하면 내가 원하는 버튼이 만들어집니다. 우측의 화면을 보면서 버튼을 만들고 난후에 아래의 코드를 긁어서 복사한 후 원하는곳에 붙여넣기 하시면 쉽게 버튼을 사용할 수 있습니다.

 

 

 

 

 

관련글

 

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

네이버동영상 다운로드 받을 수 있는 크롬확장프로그램 '비디오 다운로더'

네이버동영상 다운로드 받을 수 있는 크롬확장프로그램 '비디오 다운로더'

 

크롬브라우저 쓸때 뒤로가기 가능하게 해주는 확장프로그램 소개

크롬브라우저 쓸때 뒤로가기 가능하게 해주는 확장프로그램 소개

 

클릭 한 번으로 크롬브라우저에 열어뒀던 탭 한번에 숨기는 방법

클릭 한 번으로 크롬브라우저에 열어뒀던 탭 한번에 숨기는 방법

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 어필리에이트(쿠팡,알리익스프레스)등으로 인한 수익금을 얻을 수 있습니다.
· 이 글은 컴퓨터인터넷팁  카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.