Bot�o CSS que responde ao clique

<style>
html, body {
font-family: sans-serif;
}

body {
max-width: 40em;
margin: 2em auto;
}

main {
text-align: center;
font-size: 2em;
}

button {
font: inherit;
cursor: pointer;
}

.botao {
display: inline-block;
margin: 1em;
border: 0;
padding: 0.5em 1em;
text-decoration: none;
color: #FFF;
background: #800000;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-radius: 0.5em;
box-shadow: 2px 2px 0 1px #8B0000,inset 3px 3px 3px #8B0000;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.botao:active {
box-shadow: 0 0 0 0 #8B0000,
inset 4px 4px 4px #8B0000;
transform: translate(3px, 3px);
}
</style>

<main>
<a href="#" class="botao">
Clique-me!
</a>

<button class="botao">
Clique-me!
</button>
</main>