[CSS] BootStrap Toggle button 버튼 디자인 수정

사용한 부트스트랩 토글은 아래 사이트의 토글 버튼이다.

 

https://www.bootstraptoggle.com/

Bootstrap Toggle

 

구현하고 싶은 버튼

구현된 버튼

사이즈는 별도로 조정한것이고 옆에 흰색 부분이 구현이 안되어서 찾아본 결과 CSS를 추가하여 해결했다.

 

참고한 코드

.toggle > .toggle-group {
    background:white;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color:#666;
}

.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

 

실제로 사용한 코드

.toggle-off {
    border-color: rgba(0, 0, 0, .25);
}
.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

.toggle > .toggle-group CSS 부분은 크기를 조정해서 그런지 버튼 아랫부분에 흰줄이 생겨서 삭제했는데 구현하는 데에는 무방했다.

 

완성한 버튼 화면

 

 

참고 자료

https://github.com/minhur/bootstrap-toggle/issues/186

Bootstrap 4 fix without altering original js/css · Issue #186 · minhur/bootstrap-toggle