간편하게 CSS 디자인 버튼 생성해 주는 사이트 (티스토리 활용가능)

간편하게 CSS 디자인 버튼 생성해 주는 사이트 

 

간단하고 심플한 디자인 CSS 버튼을 생성 하여주는 사이트를 안내해드리겠습니다.

CSS 버튼이란 디자인을 통해 만든것이 아니라 html 소스와 css 소스코드만으로 만들어진 버튼이라고 보시면 됩니다. 텍스트 문구와 컬러만으로 구성된 버튼이기 때문에 페이지 로딩 속도에 끼치는 영향이 적습니다.

 

css 버튼은 html 및 css편집 기능을 제공하는 사이트 및 웹페이지에서 여러 용도로 활용되고 있습니다. 

 

하단의 css 버튼을 만들어 주는 사이트를 이용하시면 큰 어려움 없이 심플한 디자인의 버튼을 생성하실 수 있습니다.

 

---

---

CSS버튼 만들어 주는 사이트

CSS 자동생성 사이트

1. CSS 버튼 만들어주는 사이트에 찾아갑니다.

https://www.bestcssbuttongenerator.com/

A useful tool for designing css buttons

2. 왼쪽 CSS 버튼 디자인 목록에서 사용하고자 하는 버튼을 선택합니다.

3.  우측의 상세 디자인 항목을 활용하여 디자인 설정을 합니다.

 

- Text (버튼 텍스트의 디자인을 설정합니다.)

1)green (버튼 문구를 입력)

2)classname: myButton (CSS 선택자 입력)
3) Arial (폰트 선택)

- Size (버튼 크기를 설정)
1)Vertical Size: 16px (버튼 세로 크기)
2)Horizontal Size: 31px (버튼 가로 크기)

- Border (버튼 테두리 설정)
1)Border Radius: 42px (버튼 테두리 반경, 둥글기)
2)Border Size: 1px (버튼 테두리 두께)

- Box Shadow (버튼 그림자 설정)
1)Vertical Position: 0px
2)Horizontal Position: 0px
3)Blur Radius: 0px
4)Spread Radius: 0px

 

- ext Shadow (텍스트 그림자 설정)
1)Vertical Position: 1px (버튼 가로 그림자 설정)
2)Horizontal Position: 0px (버튼 세로 그림자 설정)
3)Blur Radius: 0px (블러 반경, 흐리기)

 

4. 설정을 끝내고 난후 "코드 받기(get code)를 클릭하여줍니다.

HTML/CSS 복사

 

 

5. 표시되어있는 html 및 css소스 코드 전체를 드래그 해서 복사를 합니다. 

이때에 다양한 브라우저 환경에서의 css버튼이 표시되게 하고 싶다면 "프리픽스(prefix)를 체크하시고 소스를 복사 하셔야합니다. 참고로 벤더 프리픽스는 구버전 익스플로러 (8~10등)의 css 지원의 문제로 사용이 됩니다. 2022년 6월 15일 부터 인터넷 익스플로러(IE)의 지원이 종료 되었기 때문입니다.

 

6. 복사한 html 그리고 css 소스 코드를 블로그 "skin.html" 파일 "style.css" 파일에다가 붙여 넣기를 합니다.

CSS 선택자 네임 입력

3번의 설정 항목중에서 " classname:myButton" 부분에 css 선택자 이름을 기입하면 됩니다. 예를 들어서 네이버 블로그 이웃추가 버튼을 만드는 경우 add-btn-nb등으로 구분하기 쉬우면서도 중복되지 않는 선택자 명의를 설정하시면 됩니다.

CSS버튼 다운

 

티스토리 블로그등의 수익형 블로그를 운영하시고 있으신 경우는 CSS 버튼을 잘 활용하시면 애드센스 수익을 높이는 효과도 있습니다. 다른 페이지로 이동하는 하이퍼 링크를 안내하는 문구를 돋보이게 만들어서 클릭률을 상승시키기도 하고요.  애드센스 페이지 전체화면 광고가 있기에 웹페이지에서 링크 클릭률 상승으 ㄴ수익 상승으로 이어집니다.

 

CSS 벝느 생성 사이트에 있는 아코디언 슬라이더 배너를 클릭해보시면 CSS 아코디언 슬라이더 생성기로 이동을 합니다.

해당 사이트에서는 텍스트 항목을 클릭하시면 펼쳐지는 메뉴를 만드실 수 있습니다.