Vue

by joplomacedo

HTML

<a id="caixa" href="https://pornhub.com" target="_blank">
  Esta é a minha caixa.
</a>

CSS

#caixa {
  display: block;
  font-family: helvetica;
  font-weight: 900;
  text-transform: uppercase;
  color: #a75d00;
  border: 1px solid darkorange;
  padding: 1em;
  text-align: center;
  margin: 20px;
  border-radius: 5px;
  background-color: orange;
  box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,0.04);
  transition: .1s;
}

#caixa:hover {
  background-color: lightorange;
  
  box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,0.04);
}

#caixa:active {
  background-color: darkorange;
  transform: translateY(3px);
  box-shadow: 0 3px 6px rgba(0,0,0,0), inset 0 2px 3px rgba(0,0,0,0.04);
}

Vue

window.onload =  function () {
 	
  document.querySelector('#caixa').addEventListener('click', function () {
    alert('Fui clickado!');
  });

}