Un script lorsque l'on passe la souris sur le bouton

Bonjour, je crée un bouton de fermeture de page.
J'ai stylisé le bouton et j'ai crée un :after qui prenait toute la largeur de mon bouton au click et le 75% de l'élément au passage de la souris par dessus.

Sauf que, cela cachait mon le texte du bouton, j'ai donc mis le texte dans un paragraphe et l'ai mis avec un z-index plus élevé

Cependant, je ne peux plus cliquer ou passer la souris dans tout le bouton pour avoir l'effet d'animation désiré. En effet, lorsque je passe ma souris sur le texte du bouton, l'animation s'estompe

CODE HTML :

<button id="fermer" class="fermer"><p class="pa4">CERRAR</p></button>

CODE CSS :

#fermer{
    position: relative;
    bottom: 50px;
    right: -300px;
    line-height: 30px;
    padding: 5px;
    border-radius: 10px;
    background: #0e83cd;
    width: 80px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    transition: all 700ms ease;
    border: 1px solid #fff;
    color: #fff;display: inline-block;
    overflow: hidden;
    z-index: -2;
}

.fermer:after{
    content: '';
    display: inline-block;
    background-color: #fff;
    width: 0%;
    position: absolute;
    height:100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    color: #0e83cd;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}
.fermer:hover:after{
    width: 75%;
    opacity: 1;
    color: #0e83cd;
}
.pa4:hover .fermer:after{
    width: 75%;
    opacity: 1;
    color: #0e83cd;
}
.pa4{
    display: inline;
    color:#fff;
    cursor: pointer;
    font-size: 14px;
}
.fermer:hover .pa4{
    color: #0e83cd;
    cursor: pointer;
}
.fermer:active:after{
    width: 100%;
    opacity: 1;
    color: #0e83cd;
}

Je voudrais un script qui ferait que si je passes la souris sur le texte, mon :after prenne la largeur désirée

Si vous voulez voir l'animation que je veux faire : C'est le 4e bouton de cette page http://tympanus.net/Development/CreativeButtons/

Merci!