반응형
스킨 편집 - 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;
}
버턴 디자인은 적절하게 수정해서 사용하시면 됩니다.
반응형
'디자인소스' 카테고리의 다른 글
Open in Editor JW Player (0) | 2023.10.08 |
---|---|
Musical Christmas Lights equalizer 효과 (0) | 2023.10.08 |
Digital Clock 디지탈 시계 (0) | 2023.10.04 |
[HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration (0) | 2023.10.04 |
심플한 오디오 플레이어 HTML5 Audio CSS style (0) | 2023.09.23 |
CSS 웹 페이지 터치 이벤트 (0) | 2023.09.23 |
깔끔한 jQuery Audio Player (0) | 2023.09.23 |
HLS M3U8 Player (0) | 2023.09.21 |
댓글