<div class="button">ボタン</div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; } .button { display: inline-block; width: 200px; height: 50px; text-align: center; text-decoration: none; outline: none; background-color: #333; border: 2px solid #333; color: #fff; line-height: 50px; position: relative; /* absolute用の左上を0 0の座標とした基点準備 */ z-index: 2; /* ボックスの重なりの順序指定 */ } .button, .button::before, .button::after { -webkit-box-sizing: border-box; /* paddingとborderを幅と高さに含める */ -moz-box-sizing: border-box; /* paddingとborderを幅と高さに含める */ box-sizing: border-box; /* paddingとborderを幅と高さに含める */ -webkit-transition: all .5s; /* transition効果(時間的変化)をまとめて指定 */ transition: all .5s; /* transition効果(時間的変化)をまとめて指定 */ } .button::before, .button::after { position: absolute; /* 親要素のrelativeを適用した基点から絶対位置への配置 */ z-index: -1; /* ボックスの重なりの順序指定 */ display: block; content: ''; top: 0; /* absoluteの位置を指定 */ width: 50%; height: 100%; background-color: #333; } .button::before { left: 0; } .button::after { right: 0; }