호버 시 버튼 색상을 변경하는 방법은?

제품 지원
1

안녕하세요, 멋진 컴포넌트를 만들어 주셔서 감사합니다 :slight_smile:

버튼 색상을 조금 더 커스터마이즈해 보고 있습니다. 호버 상태의 속성(버튼 색상 또는 텍스트 색상)을 변경하려면 CSS를 수정해야 하는 것 같습니다. 하지만 정확히 어디서 수정해야 하는지 모르겠습니다. 도움을 주실 수 있을까요?

2

hi @xomiamoore :slight_smile:

다음과 같은 코드를 시도해 보고, 필요에 따라 색상과 기타 속성을 조정해 보세요:

테마 또는 테마 컴포넌트의 공용 CSS에서:

// * 버튼 배경  * //

.banner-box .button-container .close, 
.banner-box .button-container .toggle {
    background: silver;
    &:hover {
    background: yellow;
    }
}

// * 버튼 텍스트 색상 //

.banner-box .button-container .close .d-button-label, 
.banner-box .button-container .toggle .d-button-label {
    color: red;
    &:hover {
    color: blue;
    }     
}

// * 화살표 아이콘 색상 * //

.banner-box .button-container .close svg, 
.banner-box .button-container .toggle svg {
    color: grey;
    &:hover {
    color: black;
    }
}

색상에 대해 16진수 색상 코드(예: #000000) 또는 테마 변수(예: var(--secondary))를 사용할 수도 있습니다.

3

Mia님,

아직도 알아두면 유용한 정보이므로, 이러한 종류의 수정을 위한 튜토리얼이 있습니다: