<div class="focus">
<a tabindex="0">ボタン</a>
</div>
.focus {
background: white;
height: 100vh;
width: 100%;
text-align:center;
}
a {
margin:80px auto;
display: inline-block;
padding: 20px 40px 20px 40px;
color: aliceblue;
font-weight: bold;
background: #333;
}
.focus:has(a:focus){
background: #a2e322; //キーボードでフォーカスすれば緑に変わる
}
.focus:has(a:hover){
background: #a2e322; //キーボードでフォーカスすれば緑に変わる
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.