<div class="button">ボタン</div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; } .button { display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; outline: none; background-color: #1C8BBD; border: 2px solid #066590; color: #fff; line-height: 50px; position: relative; z-index: 2; cursor: pointer; } .button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; transition: all .5s; } .button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; top: 0; width: 50%; height: 100%; background-color: #1C8BBD; } .button::before { left: 0; } .button::after { right: 0; } .button:hover { background-color: #fff; border-color: #59b1eb; color: #59b1eb; } .button:hover::before, .button:hover::after { width: 0; background-color: #59b1eb; }