티스토리 블로그 CSS링크 버튼 만들기

티스토리에서  CSS 링크 버튼을 자기에 스타일대로 쉽게 만들어서 바로 사용하는 방법을 간단하게 알려드리겠습니다.

 

 

 

 

다른 사람이 만들어둔 코드를 사용하는 것도 좋지만 개성있는 자신만의 CSS링크를 꼭 한번 만들어 보세요!!

 

 

 

---

1. 내스타일로 CSS버튼 만들기

 

내스타일의 링크 버튼을 만드는 간편한 방법은  Best Button Generator 사이트를 이용하여 만드는 방법입니다.

 

 

 

① 'Button Generator' 사이트 접속 후 좌측 스타일 중 원하는 디자인을 선택하여 '클릭'합니다.

② 우측 상세 설정에서 원하는 글꼴 스타일과 크기 지정을 합니다.

③ 수직, 수평 크기 정도를 조정합니다. (추천사이즈 수직:15px & 수평: 45 px)

④ 양끝 둥근 정도 및 테두리 두께를 지정합니다.

⑤ 색상 수정 후 '코드 받기(Get Code)'를 클릭합니다.

 

 

2. CCS버튼 만들기

① 관리자 홈에서 꾸미기>> 스킨 편집 >> html 편집 >> CSS로 들어갑니다.

② 아래 코드를 복사한뒤 CSS에 넣어주면 됩니다.

.myButton {
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	background-color:#2dabf9;
	border-radius:25px;
	border:1px solid #0b0e07;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:15px;
	font-weight:bold;
	padding:15px 60px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
}
.myButton:active {
	position:relative;
	top:1px;
}

3. 서식을 이용한 CCS버튼 만들기

 

① 서식을 이용하려면 "블로그관리 홈"에서

② 서식 관리자 >> "서식쓰기"로 들어갑니다.

③ 기본 모드 하단에 있는 "HTML"에 작성합니다.

④ 아래 코드를 복사하여 서식에 붙여 넣어 줍니다.

<a href="#" class="myButton">CSS 버튼 만들기</a>

 

티스토리 글을 작성하시면서 CSS버튼을 만들고 싶은 위치에 서식을 넣어주시기만 하면 됩니다.

'class="CSSButton"는 버튼 이미지 css 코드를 불러오는 명령이므로 절대로 만져서는 안되고 흰색으로 표기된 "CSS 버튼 만들기"에 수정할 텍스트 내용을 입력후 링크만 걸어주시면 완성됩니다.