makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

하이퍼링크를 다양한 버튼 스타일로 만들기

페이지를 꾸미다 보면 이미지로 버튼을 만들어 넣을때가 있습니다.

이미지버튼 대신 하이퍼링크의 스타일을 작성하여 버튼 형태의 하이퍼링크를 만들어 보겠습니다.

워드프레스에서 링크를 넣으면 밑줄이 쳐져있는 기본 링크 스타일이 적용되는데요, 몇 가지의 스타일을 미리 만들어 놓으면 쉽게 하이퍼링크를 버튼으로 사용할 수 있습니다.

 

 

1. 버튼 스타일 만들기

[관리자] > [외모] > [Custom CSS]에 접속합니다.

링크에 버튼 스타일을 적용하기 위해 다음과 간단히 디자인된 이미지를 CSS로 작성합니다. ’buttom01’이란 이름으로 작성하였습니다. 디자인 과정은 생략하겠습니다.

/* 커스텀 링크스타일 */
a.buttom01 {
display: inline-block;
background-color: #F0F0F0;
border: 1px solid #E75C37;
border-radius: 5px;
line-height: 1;
padding: 10px;
font: 14px 'Nanum Gothic';
font-weight: 800;
color:#E75C37;
text-decoration: none;
}

 

마우스 오버시 보여질 스타일을 다음과 같이 작성하고 [저장]합니다.

a.buttom01:hover {background-color:#E75C37; color:#fff;}

 

 

 

2. 버튼 적용하기

[글 작성화면]의 [텍스트] 편집모드에서 버튼스타일을 적용할 텍스트에 다음과 같이 ’class’를 적용해 줍니다.

zpost_06img01

 

홈페이지에서 보면 아래의 그림처럼 버튼스타일로 출력됩니다.

zpost_06img02

 

위와 같은 방법으로 ’button02’, ’button03’을 만들어 여러개의 하이퍼링크 스타일을 만들어놓고 사용할 수 있습니다.

zpost_06img03

 

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함 1. Start with the system update sudo apt update...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
Ubuntu 20.04에 MySQL 5.7 설치
비씨티원 인공지능 서비스 플랫폼 BAP(Bctone AI service Platform)의 설치 환경은 공식적으로 Ubuntu 18.04와 MySQL 버전 5.7 입니다. 최근 Ubuntu...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다. 1. apt update 사용자...