<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効果(時間的変化)をまとめて指定 */ }