티스토리 더보기 버튼 디자인(CSS)

기본적인 더보기 버튼의 디자인

일반적으로 별도의 스킨을 사용하지 않거나 티스토리 내에서 스킨수정을 하지 않았다면 더보기 버튼이 매우 밋밋해보일 수 있다. 더보기 기능은 많이 쓰는 편은 아니지만, 쓰는 사람에 따라서 유용하게 사용할 수 있는 기능 중 하나로, 중요하진 않지만 매우 긴 내용을 감추거나 부가적인 설명을 할 때 더보기 버튼을 적절하게 활용할 수 있다.

 

 

버튼 형태로 재구성한 디자인

별도의 CSS를 추가하지 않았다면 아마도 위와 같이 밋밋한 텍스트만 남아있을 것이다. 이러면 아무리 좋은 글을 써도 감춰진 정보를 방문자가 그냥 놓쳐버릴 수가 있다. 그래서 간단한 안쪽 여백과 외곽선을 추가해줘서 버튼처럼 보이게 할 수 있을 것이다.

이렇게 하면 다소 밋밋한 더보기 버튼이 위와 같이 조금 색다르게 보일 수 있다.

배경색을 넣고 더보기 글자 색을 흰색으로 하는 방법도 있고, 취향에 따라서 다른 컬러를 적용해도 좋다. 혹은 선의 모서리를 둥글게 하는 border-radius 값을 조금 준다면 훨씬 클릭하기 좋은 버튼 형식으로 적용할 수 있을 것이다.

경우에 따라서는 이미지로 구현할 수도 있고 여러가지 요소를 추가할 수 있다. 티스토리 내에서 위에 적용된 CSS 코드는 더보기로 확인해볼 수 있다.

 

/*div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless { color: #909090; font-size: 16px; line-height: 26px; font-family: 'Noto Sans DemiLight', sans-serif; cursor: pointer; text-decoration: none; border: 1px solid #909090; padding: 10px 60px 10px 60px; max-width: 1060px; display: table; margin: 0 auto; margin-bottom: 40px;}/*