Core Code
Core Code Modern Dev Handbook

Hover and Focus States

Interactive elements should have hover and focus states.

Preview

Code

<style>
button{
background:#2563eb;
color:white;
border:none;
padding:8px 14px;
}

button:hover,
button:focus{
background:#1d4ed8;
}
</style>

<button>Interactive Button</button>

More CSS Accessibility Examples (8)

example Accessible Color Contrast open example example Visible Focus Style open example example Accessible Link Styling open example example Readable Font Size open example example Readable Spacing open example example Accessible Form Focus open example example Large Click Targets open example example Disabled Element Style open example