<style> 
                        .btn0 { height: 100vh; background: #eee; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; box-sizing: border-box; } 
                        .btn3 { width: 150px; height: 50px; border: 1px solid #333; font-family: 'Cinzel', serif; font-size: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; transition: 1s; } 
                        .btn3::before, 
                        .btn3::after { position: absolute; background: #eee; z-index: -1; transition: 1s; content: ''; } 
                        .btn3::before { height: 50px; width: 130px; } 
                        .btn3::after { width: 150px; height: 30px; } 
                        .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 
                        .btn3:hover::before { width: 0px; background: #fff; } 
                        .btn3:hover::after { height: 0px; background: #fff; } 
                        .btn3:hover { background: #fff; } 
                        </style>

<div class="btn3 btn0"> <div class="noselect">Bouton</div> </div>