Effetto door su bottoni con i CSS

In questo articolo vediamo un piccolo snippet CSS per creare un effetto door sui bottoni nell'hover.

Non c'è molto da dire, quindi ecco il codice:

<style>
  button {
    border: none;
    transition: .4s ease-in;
    padding: 30px;
  }

  button:hover {
    box-shadow: inset -10.5em 0 0 0 #ff6600, inset 10.5em 0 0 0 #ff6600;
  }
</style>

<button type="button">BUTTON</button>

Enjoy!