티스토리 링크버튼 CSS 코드로 만드는 방법

티스토리 블로그 글을 쓸 때, 해당 사이트 링크를 소개해야 할 경우가 많습니다. 이러한 경우에 사이트 주소 링크를 단순히 남기는 것보다는 버튼 형식의 링크를 남기면 디자인 측면에서 보다 가독성이 좋습니다. 이번 글에서는 CSS 코드를 활용하여 티스토리 링크버튼 만드는 방법을 알아보겠습니다.

 

 

CSS 편집 화면으로 들어가기

먼저, 티스토리 관리자 화면의 좌측 메뉴에서, 스킨 편집을 눌러서 html 편집 화면 안으로 들어갑니다.

 

 

그리고 상단 메뉴 중에서 CSS를 눌러 CSS 편집화면으로 들어갑니다.

 

 

링크버튼 생성을 위한 CSS 코드 입력

링크버튼을 만들기 위해 아래와 같이 CSS 코드를 복사하여 입력해 줍니다. 아래의 CSS 코드에서 색깔 또는 크기는 원하시는 대로 적용하시면 됩니다.

.myButton {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:10px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:28px;
	font-weight:bold;
	padding:15px 76px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

 

CSS 코드 맨 위에 입력하셔도 되며, 맨 아래 입력하셔도 됩니다. 저는 위쪽에 입력하였습니다.

 

링크버튼 서식 만들기

블로그 관리화면 좌측 메뉴에서 서식관리를 눌러 서식쓰기를 선택합니다. 원하는 서식의 제목을 입력하면 되는데요. 저는 링크버튼이라고 알기 쉽게 입력했습니다.

 

 

HTML 모드로 들어가서 아래와 같이 링크버튼 html을 입력 후 저장합니다.

<a href="#" class="myButton">orange</a>

 

 

서식을 사용하여 CSS 링크버튼 적용

블로그 글을 쓸 때, 링크 버튼을 적용할 경우에는 서식을 눌러 링크버튼을 적용 후, 링크버튼 안에 들어갈 텍스트 내용과 링크 주소를 걸어주면 됩니다.

 

 

글쓰기 화면에서는 일반 링크 주소와 구분이 안되지만, 미리보기 또는 글을 발행하고 나면 링크버튼으로 적용된 것을 확인할 수 있습니다.

 

마치며

이번 글에서는 티스토리 블로그 글을 쓸때 링크버튼을 CSS 코드를 사용하여 만들어 보는 방법을 알아보았습니다. 아래의 다양한 디자인의 링크버튼을 만드는 방법도 참고해주세요.

 

티스토리 블로그 버튼 링크 손쉽게 만드는 법