워드프레스에서 블로그를 하다 보면 자주는 아니지만 가끔 내부 또는 외부 링크를 사용할 때가 있습니다. 이때 링크를 버튼 스타일로 만들면 눈에 잘 띄고 보기에도 좋기 때문에 블로그에 긍정적 효과를 가져다 줍니다. 이 글에서는 워드프레스에 CSS 버튼 스타일을 등록하고 사용하는 방법에 대해 알아보겠습니다.
워드프레스에 CSS 버튼 스타일을 등록하고 사용하는 방법
우선 무료로 버튼 CSS 코드를 만들어 주는 사이트를 활용해서 등록하고 싶은 버튼의 수만큼 CSS 코드를 생성하도록 하겠습니다. 아래 링크를 클릭하여 사이트로 이동합니다.
https://www.bestcssbuttongenerator.com/
사이트에 들어가면, 왼쪽에 이미 만들어진 CSS 버튼들이 있고, 오른쪽에는 사용자가 원하는 대로 설정을 변경할 수 있도록 되어 있습니다. 왼쪽의 버튼 스타일 중 마음에 드는 것을 골라 그대로 사용하셔도 되고, 폰트의 크기나 테두리 등의 속성을 바꿔서 적용할 수도 있습니다. 저는 예제로 아래와 같이 white 속성을 변경 없이 그대로 사용하도록 하겠습니다. white 속성을 선택한 후, 오른쪽에서 버튼 스타일을 불러 올 때 필요한 CLASS 이름을 설정해 줍니다. 저는 ‘mb_white’로 입력하였습니다.
CLASS 이름을 입력한 후, 아래와 같이 ‘Get Code’를 클릭하면 오른쪽에 코드가 생성됩니다. 이 코드 중 ‘.mb_white’로 시작되는 부분부터 마지막까지 복사합니다.
아래는 복사한 코드입니다. 이제 이 코드를 워드프레스 ‘추가 CSS’에 추가하도록 하겠습니다.
.mb_white {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.mb_white:hover {
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.mb_white:active {
position:relative;
top:1px;
}
워드프레스 관리자 화면에서 ‘외모’ → ‘사용자 정의하기’ → ‘추가 CSS’ 로 이동한 후, 아래 그림과 같이 위의 코드를 붙여넣기 하고, ‘공개’를 클릭하여 적용하면 CSS 버튼 스타일 등록이 완료된 것입니다.
등록한 CSS 버튼 스타일을 링크에 적용해 보도록 하겠습니다. 먼저, 아래와 같이 ‘네이버 홈페이지’ 라는 링크가 있을 경우, 마우스로 ‘네이버 홈페이지’를 클릭한 후, 가로 3개 점 → ‘HTML로 편집’을 클릭합니다.
‘HTML로 편집’을 클릭하면 링크 부분만 HTML 코드를 직접 수정할 수 있게 되는데, 여기서 ‘class=”mb_white”’를 ‘<a’와 ‘href’ 사이에 추가합니다. class명 mb_white는 제가 설정했던 이름이고 여러분이 설정한 이름이 다를 경우 여러분이 설정한 이름을 쓰시면 됩니다. 코드를 삽입한 후 ‘비주얼로 편집’을 클릭합니다.
어렵지 않게 링크에 CSS 버튼 스타일을 적용하였습니다. 이제 결과를 확인해 보도록 하겠습니다. 아래는 위와 같이 코드를 삽입한 후 미리보기한 화면으로, CSS를 적용한 ‘네이버 홈페이지’ 링크는 버튼 스타일로 눈에 띄게 바뀌었고, CSS를 적용하지 않은 ‘구글 홈페이지’와 확연하게 대비되는 것을 확인하실 수 있습니다.
오늘은 워드프레스에 CSS 버튼 스타일을 등록하고 사용하는 방법을 알아보았습니다. CSS 버튼 스타일 적용은 의외로 간단하지만, 어떻게 하는지 잘 모르시는 분들이 많습니다. 버튼 스타일을 선택하면 코드를 만들어 주는 사이트에서 버튼 CSS 코드를 만들고, 해당 코드를 워드프레스에 등록해 놓은 후 필요할 때마다 불러와 사용하면 여러분이 원하는 버튼 스타일의 링크를 쉽게 적용할 수 있습니다. 이 글을 참고해서 여러분의 블로그에도 적용해 보시기 바랍니다.