본문 바로가기

티스토리 블로그 더보기 버튼 css로 꾸미기

반응형

스킨 편집 - html편집  CSS탭으로 이동하신 후, 가장 아래의 빈 공간

아래의 코드를 추가하신 후 저장해 주시면 됩니다.

.btn-toggle-moreless, .btn_more, .btn_less {
    background: #000; /*버튼 배경색*/
}
.btn-toggle-moreless, .btn_more, .btn_less {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 5px 7px; /*버튼 안쪽 패딩*/
    border-radius: 8px; /*버튼 둥근 정도*/
    margin-top: 5px;
    color: #fff!important; /*버튼의 더보기 글씨색. 하얀색입니다.*/
    font-size: 14px!important; /*버튼의 글씨크기. 원하시는대로 조절하세요*/
}
div[data-ke-type='moreLess'] {
	position:relative;
}
div[data-ke-type='moreLess']::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 1px dashed #ebebeb;
    margin-top: 22.5px;
}
.moreless-content {
    padding: 15px 5px;
    border-bottom: 1px dashed #ebebeb;
}
.btn-toggle-moreless:before, .btn_more:before {
    content: '✚';/*버튼이 접혀있을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
    content: '✖'; /*버튼을 닫을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}

버턴 디자인은 적절하게 수정해서 사용하시면 됩니다.

반응형

댓글


Copyright ⓒ SmartWeb All rights reserved.