워드프레스 링크 버튼 만들기 2탄 CSS 버튼 생성 사이트를 이용한 CSS 링크 버튼 만들기 입니다. 심플한 디자인의 CSS 버튼을 만들어 주는 사이트를 하나 소개하겠습니다. CSS 버튼이란 이미지를 사용하지 않고 html 소스와 CSS 소스 코드만으로 만들어진 버튼을 말합니다.
CSS 링크 버튼은 텍스트 문구와 색으로만 구성된 버튼이기 때문에 자유롭게 변경할 수 있습니다. 페이지 로딩 속도에 미치는 영향이 적어 제약이 없다고 봐도 무방합니다.
목차
CSS 버튼 및 CSS 링크 버튼
CSS 버튼 및 CSS 링크 버튼 등은 워드프레스, 구글 블로거, 티스토리 등과 같이 html과 CSS를 자유롭게 편집할 수 있는 사이트 및 서비스에서 다양한 용도로 사용할 수 있습니다.
예를 들면 티스토리 블로그나 구글 블로거 등에서 네이버 블로그 이웃 추가 버튼을 CSS 버튼으로 만들어 사용할 수 있습니다.
네이버 이웃 추가 버튼 뿐만 아니라 카카오톡, 페이스북, 인스타그램 등의 SNS 팔로우 버튼 등도 CSS 버튼으로 만들어 사용할 수 있습니다.
CSS 링크 버튼 만들기 서비스
css button generator 사이트에서 제공하는 CSS 링크 버튼 만들기 서비스를 이용하면 큰 노력 없이 심플한 디자인의 CSS 버튼을 만들 수 있습니다.
현재 약 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 (블러 반경, 흐리기)
- Text (버튼 텍스트 디자인 설정)
- 모든 설정을 마쳤다면 코드 받기(Get Code) 버튼을 클릭합니다.
- 표시된 HTML 및 CSS 소스 코드 전체를 드래그 하이라이트 한 후 복사(Ctrl + C) 합니다.
- 또는 컨텍스트 메뉴를 이용하여 ‘복사’ 합니다.
- 이때 다양한 브라우저 환경에서 CSS 버튼이 표시되게 하고 싶다면 ‘프리픽스(Prefix)’를 체크한 후 해당 소스를 복사하여 사용합니다.
- 참고로 벤더 프리픽스(Vendor Prefix)는 구버전 익스플로러(8, 9, 10 등)의 CSS 지원 문제로 사용됩니다.
- 2022년 6월 15일부로 인터넷 익스플로러(IE)의 지원이 종료되었습니다.
HTML 및 CSS 소스 코드 삽입
티스토리 블로그는 복사한 HTML 및 CSS 소스 코드를 ‘skin.html’ 파일과 ‘style.css’ 파일에 붙여 넣습니다.
HTML 소스 코드를 서식으로 만들어 놓고 필요한 글에 삽입하며 사용하는 방법도 있습니다.
워드프레스의 경우에는 HTML 소스는 서식 (재사용 블록) 문서로 등록합니다. 마찬가지로 HTML 소스 코드를 재사용 블록으로 등록해 놓고 필요한 글에 삽입하면 됩니다.
CSS 소스 코드는 테마의 사용자 정의 파일 추가 CSS에 추가합니다. 또는 테마 파일 에디터 style.css 파일에 저장합니다.
워드프레스의 경우는 선호하는 방식 또는 이용 가능한 파일에 저장하면 됩니다.
클래스 네임 설정하여 CSS 링크 버튼 만들기
CSS 링크 버튼 만들기 서비스 이용 시 클래스 네임을 설정하면 보다 자유롭게 CSS 버튼을 제어할 수 있습니다.
3번 설정 항목 중 “classname: myButton” 부분에서 클래스 네임을 설정하면 됩니다. CSS 선택자는 특정할 수 있는 고유의 이름을 설정해야 합니다.
예로 네이버 블로그 이웃 추가 버튼을 만들 경우 add-naver-neighbor-btn, add-btn-nb 등으로 구분하기 쉬우면서도 중복 되지 않는 이름으로 설정하면 됩니다.
티스토리 블로그, 워드프레스 등에서 수익형 블로그를 운영할 경우 CSS 버튼을 잘 이용하면 애드센스 수익을 높일 수 있습니다. 다른 페이지로 이동하는 하이퍼 링크 혹은 링크를 안내하는 문구(클릭 유도 문구)를 돋보이게 만들면 클릭율 상승을 도모할 수 있습니다.
애드센스에는 페이지 이동 시 게재되는 전체 화면 광고(모바일 전면 광고 및 더 넓은 화면)가 있기 때문에 웹페이지에서의 링크 클릭율 상승은 수익 상승으로 이어집니다.
CSS 버튼 생성 사이트에 있는 아코디언 슬라이더(Accordion Slider) 배너 이미지를 클릭하면 CSS 아코디언 슬라이더 생성기 사이트로 이동합니다.
해당 사이트에서는 텍스트 항목을 클릭하면 펼쳐지는 메뉴(토글 메뉴 혹은 아코디언 메뉴)를 만들 수 있습니다. CSS 토글 메뉴가 필요하신 분들은 링크한 링크 버튼 만들기 사이트에 방문하여 살펴보시기 바랍니다.
링크 버튼 만들기 1탄에서 공유한 css 텍스트 링크 버튼 소스를 이용해도 됩니다. 위에 있는 링크 버튼인데요. 버튼 소스를 추가하고 스킨 또는 테마와 어울리는 색상 값으로 변경하여 사용하면 됩니다.