Detect a clik and start a "function" on CSS - css

Question

Now I have a code that makes a button not visible, and show it in x seconds, my idea was to start this timer, when a video is clicked, I don't need, that if they stop the video, the timer stops, but if it is possible to do it, it would be helpful. I can give, to this video, a name for the ID, and a name for the class, I already did that with the button, and give the name "button".
The code that I alredy have:
body.page-id-2090 #button{
visibility: hidden;
}
#button {
animation: show 0s both;
animation-delay: 30s;
}
#keyframes show {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}

Answer 1

There is a few examples to try:
CSS selectors:
#element_id:active
example:
.button {
width: 50px;
height: 20px;
padding: 10px 20px;
text-align: center;
box-shadow: 1px 1px 1px #000;
color: red;
}
.button:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
background-color: red;
color: white;
}
#btnClick {
display: block;
visibility: hidden;
}
<input type="checkbox" id="btnClick" />
<label class="button" for="btnClick">Check onClick CSS effect</label>
#element_id:target
example:
#elementToShow {
display: none;
padding: 20px;
}
#elementToShow:target {
display: block;
}
.element {
color: red;
font-size: 2rem;
}
Click to show element by CSS selector
<div class="element" id="elementToShow">Element visible!</div>