No need to add a[href="#"] to provide a focusable area.

Just add tabindex="0" to any element you want to be focusable.

CSS

body {
    margin: 10px;
}
p {
    margin-bottom: 1em;
}
output {
    font-style: italic;
}

button, span, a[href="#"] {
    background: lime;
    border: solid 1px black;
    padding: 5px;
    font: 13px serif;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    color: black;
}
button:hover, span:hover, a[href="#"]:hover {
    background: yellow;
}
button:focus, span:focus, a[href="#"]:focus {
    border: solid 1px red;
    outline: none;
}
button:active, span:active, a[href="#"]:active {
    background: cyan;
}