티스토리 꾸미기 :: 접은글 버튼 만들기

 

 

 

 

 

 

 

 

 

 

티스토리 더보기 버튼 만들기

 

티스토리에서 제공하는 접은글은 구분이 명확하지 않아

 

가독성도 떨어지고 이쁘지도 않습니다.

 

이번 시간에는 접은글 버튼을 만들어서

 

가독성도 올리고 UI도 더 이쁘게 만들어볼게요.

 

 

 

접은글 미리보기

버튼을 눌러보세요.

변경한 접은글을 테스트를 해보겠습니다.

 

 

CSS 수정하기

 

 

관리자홈 > html 편집 > CSS 탭으로 들어가줍니다.

 

 

ctrl+f 로  "#article-view div[data-ke-type='moreLess'] {" 를

 

찾아줍니다.

 

#article-view div[data-ke-type='moreLess'] {

 

 

 

전체 구문을 /* .....  */ 로 감싸서 아래처럼 주석처리를 해줍니다.

 

 

 

 

 

CSS 추가하기

 

아래 코드를 복사하여 CSS 하단에 붙여넣기를 해줍니다.

 

 /* 더보기 버튼 꾸미기 */
.btn-toggle-moreless, .btn_more, .btn_less {
​​​​background-image: linear-gradient(356deg,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); /*버튼 배경색*/
​​​​border: 0 solid #285bfd;
​​​​border-radius: 9999px;
​​​​box-shadow: rgba(37, 44, 97, .15) 0 4px 11px 0, rgba(93, 100, 148, .2) 0 1px 3px 0;
}
.btn-toggle-moreless, .btn_more, .btn_less {
​​​​z-index: 1;
​​​​position: relative;
​​​​display: inline-block;
​​​​padding: 8px 24px; /*버튼 안쪽 여백*/
​​​​border-radius: 50px; /*버튼 모서리 라운드*/
​​​​margin-top: 5px;
​​​​color: #fff !important; /*버튼의 더보기 글색*/
​​​​font-size: 16px !important; /*버튼의 글크기*/
}
.btn-toggle-moreless:hover { /*버튼 마무스오버 효과가 필요 없으면 이 코드를 지워주세요*/
​​​​background-image: linear-gradient(356deg,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); /*버튼 마우스오버 배경색*/
}
div[data-ke-type='moreLess'] {
​​​​position: relative;
}
div[data-ke-type='moreLess']::before {
​​​​content: '';
​​​​position: absolute;
​​​​width: 100%;
​​​​border-bottom: 1px dashed #bbb; /*박스 상단 라인*/
​​​​margin-top: 25.5px; /*라인높이*/
}
.moreless-content {
​​​​padding: 10px 10px; /*박스 내부 여백*/
​​​​margin: 10px 0px; /*박스 외부 여백*/
​​​​border-radius: 10px; /*박스 모서리 라운드*/
​​​​border-bottom: 0px dashed #bbb; /*박스 하단 라인*/
​​​​background: #f5f5f5; /* 박스 안 배경색 */
}
.btn-toggle-moreless:before, .btn_more:before {
​​​​content: '✚';/*버튼이 접혀있을 때 앞에 붙일 아이콘*/
​​​​margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
​​​​content: '✖'; /*버튼을 닫을 때 앞에 붙일 아이콘*/
​​​​margin-right: 5px;
}
/* 더보기 버튼 꾸미기 끝 */

참고 할 CSS 그라데이션 색상 사이트 입니다.

https://cssgradient.io/

CSS Gradient – Generator, Maker, and Background