워드프레스 버튼 만들기, CSS 코드 생성 추가 블록 편집기

 

워드프레스 버튼 만들기, CSS 코드 생성 추가 블록 편집기

 

플러그인을 사용하지 않고 단순히 워드프레스의 기본 버튼 메뉴와 CSS만을 사용하여 수십, 수백 가지의 다양한 버튼을 만드는 방법을 소개한다.

---

상세내용, 신청서식 등

 

상세내용, 신청서식 등은 아래를 클릭

워드프레스 버튼 만들기, 아이콘 추가 CSS 클래스

 

 

 

아래는 요약글 입니다.

---

버튼 결과물 보기

 

기본적으로 약간의 라운드가 있는 버튼으로 현재는 녹색과 빨강, 다운로드 아이콘과 링크 아이콘만 적용했다. 마우스가 버튼 위로 올라왔을 때 버튼 모양이 살짝 변경되게 해뒀다.

---

워드프레스 버튼 CSS 코드

 

아래 코드를 본인의 취향에 맞게 살짝 수정 한 후 CSS코드에 복사하여 붙여 넣기 하면 된다. 알아보기 쉽게 주석을 달아 놨기에 그 부분을 본인의 취향에 맞게 수정하면 된다.

---

워드프레스 버튼 만들기

 

① 워드프레스 기본 메뉴인 버튼을 삽입하고, 아무것도 설정하지 않고 기본 그대로 놔둔다.

 

② 버튼에 필요한 글을 작성하거나 링크를 삽입한다.

 

③ 글 중간을 클릭하고 워드프레스 오른쪽 메뉴 하단부 고급 – 추가 CSS 클래스에 아래 글자를 입력한다.

 

내용 더 보기