Some web sites display a button at the top of a page only for users who are navigating using the keyboard. You may need a similar feature for your project. This is one way to meet this challenge.
Keyboard Navigation Trick for displaying a button only when keyboard navigation gives the button focus
Example: https://dki.io/53e12d4a
Use the tab key on your keyboard to navigate through the page. You'll notice that the custom button will gain the focus right after the next button in the player bar, if you're using a theme with builtin navigation. The custom button will "appear" because the button style changes from transparent to having a color. When you tap the tab key again, and move focus away from the button, it will return to transparent and appear hidden.
You will do the following:
- Create a custom button style in the theme where all color elements are transparent. (As shown below in the image)
- Add a button to a page, or header/footer, and apply the custom style.
- Add the following css to ADD CSS in your theme.
/*change focus state of hidden buttons*/
.btn.btn-btn4:focus
{
background: red !important;
color: white !important;
}
Comments ( 0 )
Sign in to join the discussion.