<p>Use the tab key to navigate</p>
<div class="container">
<button class="button">Visible Button</button>
<button class="button sr-only visually-hidden" id="hidden">Hidden Button</button>
<button class="button">Visible Button</button>
</div>
:root {
--bg-color: #fff;
}
body {
padding-top: 80px;
background-color: var(--bg-color);
}
p {
font-size: 200%;
padding-left: 60px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 40px;
background-color: var(--bg-color);
}
.button {
font-size: 100%;
padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8);
border: transparent;
background-color: #e6e6e6;
text-decoration: none;
border-radius: 2px;
margin: 0 1em;
cursor: pointer;
}
.button:hover {
background-color: cornflowerblue;
}
.button:focus {
background-color: tomato;
}
/**
* Accesible way to hide things in CSS.
*/
.visually-hidden {
z-index: -1;
}
.visually-hidden:focus {
z-index: 2;
}
/*
* https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/#comment-1764546
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.