I have a button, when clicking on that button i make its background a colour via the :active selector. The button has children, 2 divs. The first of those divs, i want its font color to change to white when the button's active state triggers. Ive tried combining active with the child selector but cant seem to get this working, is it possible?
Here's a sample in codepen
https://codepen.io/starkbotha/pen/ExLYNWJ
.my-button {
width: 108px;
height: 108px;
border: 1px solid #000;
padding: 17px;
border-radius: 10px;
background-color: transparent;
transition-duration: 0.3s;
text-align: left;
cursor: pointer;
}
.my-button:hover {
background-color: #ffffff;
border: 2px solid #21a086;
}
.my-button:active {
background-color: #21a086;
border: 2px solid #21a086;
}
.my-button:active > button-value {
color: white;
}
<button class="my-button">
<div class="button-value">123</div>
<div>My Title</div?
</button>
You forgot "." after calling your div class in css
.my-button {
width: 108px;
height: 108px;
border: 1px solid #000;
padding: 17px;
border-radius: 10px;
background-color: transparent;
transition-duration: 0.3s;
text-align: left;
cursor: pointer;
}
.my-button:hover {
background-color: #ffffff;
border: 2px solid #21a086;
}
.my-button:active {
background-color: #21a086;
border: 2px solid #21a086;
}
.my-button:active > .button-value {
color: white;
}
<button class="my-button">
<div class="button-value">123</div>
<div>My Title</div?
</button>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments