Categories: 미분류

워드프레스 링크 버튼 만들기 2탄 CSS 버튼 생성 사이트 이용하기

워드프레스 링크 버튼 만들기 2탄 CSS 버튼 생성 사이트를 이용한 CSS 링크 버튼 만들기 입니다. 심플한 디자인의 CSS 버튼을 만들어 주는 사이트를 하나 소개하겠습니다. CSS 버튼이란 이미지를 사용하지 않고 html 소스와 CSS 소스 코드만으로 만들어진 버튼을 말합니다

CSS 링크 버튼은 텍스트 문구와 색으로만 구성된 버튼이기 때문에 자유롭게 변경할 수 있습니다. 페이지 로딩 속도에 미치는 영향이 적어 제약이 없다고 봐도 무방합니다.

CSS 버튼 및 CSS 링크 버튼

CSS 버튼 및 CSS 링크 버튼 등은 워드프레스, 구글 블로거, 티스토리 등과 같이 html과 CSS를 자유롭게 편집할 수 있는 사이트 및 서비스에서 다양한 용도로 사용할 수 있습니다.

예를 들면 티스토리 블로그나 구글 블로거 등에서 네이버 블로그 이웃 추가 버튼을 CSS 버튼으로 만들어 사용할 수 있습니다.

네이버 이웃 추가 버튼 뿐만 아니라 카카오톡, 페이스북, 인스타그램 등의 SNS 팔로우 버튼 등도 CSS 버튼으로 만들어 사용할 수 있습니다.

CSS 링크 버튼 만들기 서비스

css button generator 사이트에서 제공하는 CSS 링크 버튼 만들기 서비스를 이용하면 큰 노력 없이 심플한 디자인의 CSS 버튼을 만들 수 있습니다.

https://www.bestcssbuttongenerator.com/

A useful tool for designing css buttons

Button generator is a free online tool that allows you to create cross browser css button styles.

www.bestcssbuttongenerator.com

현재 약 40가지 디자인의 버튼을 제공하고 있는데요. 사용자가 직접 버튼 크기, 색상, 테두리 두께, 폰트, 그림자 등을 설정 할 수 있습니다.

CSS 버튼 생성 사이트에 방문합니다.
왼쪽의 CSS 버튼 디자인 목록에서 사용할 버튼을 선택합니다.

우측의 버튼 디자인 설정 도구를 이용하여 디자인 버튼 외형을 설정합니다.
- Text (버튼 텍스트 디자인 설정)
  - green (버튼 문구 입력)
  - classname: myButton (CSS 선택자 입력)
  - Arial (폰트 선택)
- Size (버튼 크기 설정)
  - Vertical Size: 16px (버튼 세로 크기)
  - Horizontal Size: 31px (버튼 가로 크기)
- Border (버튼 테두리 설정)
  - Border Radius: 42px (버튼 테두리 반경, 둥글기)
  - Border Size: 1px (버튼 테두리 두께)
- Box Shadow (버튼 그림자 설정)
  - Vertical Position: 0px
  - Horizontal Position: 0px
  - Blur Radius: 0px
  - Spread Radius: 0px
- Text Shadow (텍스트 그림자 설정)
  - Vertical Position: 1px (버튼 가로 그림자 설정)
  - Horizontal Position: 0px (버튼 세로 그림자 설정)
  - Blur Radius: 0px (블러 반경, 흐리기)

모든 설정을 마쳤다면 코드 받기(Get Code) 버튼을 클릭합니다.

표시된 HTML 및 CSS 소스 코드 전체를 드래그 하이라이트 한 후 복사(Ctrl + C) 합니다.
- 또는 컨텍스트 메뉴를 이용하여 ‘복사’ 합니다.
- 이때 다양한 브라우저 환경에서 CSS 버튼이 표시되게 하고 싶다면 ‘프리픽스(Prefix)’를 체크한 후 해당 소스를 복사하여 사용합니다.
  - 참고로 벤더 프리픽스(Vendor Prefix)는 구버전 익스플로러(8, 9, 10 등)의 CSS 지원 문제로 사용됩니다.
  - 2022년 6월 15일부로 인터넷 익스플로러(IE)의 지원이 종료되었습니다.