티스토리 무료 눈에 띄는 버튼 만들기 (html, css 사용)

2023-11-07 16:01:48

티스토리 블로그를 운영하다보면 외부링크나 내부링크를 걸어야하는 경우가 생기는데, 그때 다른 티스토리를 보면 버튼모양으로 예쁘게 꾸며진 경우를 봤을겁니다. 이번 포스팅에서는 무료로 버튼을 만들고 간단하게 적용할 수 있는 방법을 알려드리도록 하겠습니다.

목차 숨기기

무료 버튼 만들기

다른 사람의 티스토리블로그나 워드프레스 블로그를 보다 보면 글 중간에 다음 과 같은 버튼들으로 꾸며저 있는 것을 본 적이 있으실텐데요.

이미지로 할지 CSS로 할지 고민이 많으실텐데요, 이미지로 만들자니 일일히 만들기도 귀찮고.

html, css는 어려워서 어떻게 하는지 모르는 분들을 위해 간단하게 무료로 만들 수 있는 방법을 알려드리겠습니다.

무료로 버튼 만들러 가기

로그인/ 회원가입 없기 때문에 빠르게 만들 수 있으니 바로 보시면서 따라하실 수 있습니다.

원하는 스타일의 버튼을 고릅니다.
자신이 선택한 버튼을 확인합니다.
버튼 크기 글씨체 모양 등 변경을 합니다.
Get Code버튼을 눌러 html 과 css를 확인합니다.
만들어진 결과를 복사해 둡니다.

내 블로그에 적용하기

이제 HTML a태그와 CSS가 생겼습니다.

<a href="#" class="myBtn">내가 원하는 링크</a>

/* 내 버튼 꾸미기*/
.myBtn {
    width: 75%;				/* 버튼 크기를 키우고 싶다면 추가해주세요 */
    box-shadow: 0px 0px 0px 2px #f29c93; 	/*건들지마세요 */
    background-color:#ef4431;		/* 버튼 색상을 변경해주는거에요 */
    border-radius:20px;				/*  radius px숫자가 커지면 더 둥글게 되요 */
    border:1px solid #d83526;		/*  건들지마세요 */
    display:inline-block;			/*   건들지마세요 */
    cursor:pointer;					/*   건들지마세요 */
    color:#ffffff !important; 		/* !important를 넣지 않으면 글씨 색이 파랗게 될 수 있어요 */
    font-size:20px;					/*   글씨크기 */
    font-weight:bold;				/*   글씨두께 */
    padding:12px 60px;				/*   건들지마세요 */
    text-align: center;				/* 글씨 중앙 정렬해주는 거에요 */
    text-decoration:none;			/*   건들지마세요 */
    text-shadow:0px 1px 0px #b23e35;/*   건들지마세요 */
}
.myBtn:hover {
	background-color:#ce0100;		/* 버튼에 마우스를 올렸을 때 색이 변하게 해주는거에요 */
}
.myBtn:active {
    position:relative;
    top:1px;
}

무료로 만든 버튼이 잘 만들어졌는지 한번 보겠습니다.

내부링크를 걸어서 버튼에 적용한 모습입니다.

티스토리 기본 단축키 보러 가기

티스토리 플러그인 이전 발행글을 넣은 모습과 비교해보려고 넣어봤습니다.티스토리 기본 단축키 정리티스토리로 열심히 포스팅을 하다보면 이것저것 수정하는데 시간이 오래 걸리는 경우가 많습니다. 이번 포스팅에서는 포스팅 시간을 단축시켜 줄 수 있는 유용한 티스토리 기본 단축키를 정리onesecond.kr

용도에 따라서 사용하면 좋을 거 같은 생각이 듭니다.

이제 적용하는 방법에 대해서 알아보겠습니다.