<div class="button01">アレンジ1</div> <div class="button02">アレンジ2</div> <div class="button03">アレンジ3</div> <div class="button04">アレンジ4</div>
body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .button01 { 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; } .button01, .button01::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; transition: all .5s; } .button01::before { position: absolute; z-index: -1; display: block; content: ''; } .button01::before { top: 0; width: 100%; height: 100%; background-color: #1C8BBD; } .button01::before { left: 0; } .button01:hover { background-color: #fff; border-color: #59b1eb; color: #59b1eb; } .button01:hover::before { width: 0; background-color: #59b1eb; } .button02 { display: inline-block; margin-top: 10px; 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; } .button02, .button02::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; transition: all .5s; } .button02::before { position: absolute; z-index: -1; display: block; content: ''; } .button02::before { top: 0; width: 100%; height: 100%; background-color: #1C8BBD; } .button02::before { right: 0; } .button02:hover { background-color: #fff; border-color: #59b1eb; color: #59b1eb; } .button02:hover::before { width: 0; background-color: #59b1eb; } .button03 { display: inline-block; margin-top: 10px; 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; } .button03, .button03::before, .button03::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; transition: all .5s; } .button03::before, .button03::after { position: absolute; z-index: -1; display: block; content: ''; } .button03::before { top: 0; width: 100%; height: 50%; background-color: #1C8BBD; } .button03::after { top: 25px; width: 100%; height: 50%; background-color: #1C8BBD; } .button03::before { left: 0; } .button03::after { right: 0; } .button03:hover { background-color: #fff; border-color: #59b1eb; color: #59b1eb; } .button03:hover::before, .button03:hover::after { width: 0; background-color: #59b1eb; } .button04 { display: inline-block; margin-top: 10px; 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; } .button04, .button04::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: ease-in .3s; transition: ease-in .3s; } .button04::before { position: absolute; z-index: -1; display: block; content: ''; } .button04::before { bottom: 0; width: 0; height: 10%; background-color: #1C8BBD; } .button04::before { left: 0; } .button04:hover { background-color: #fff; color: #59b1eb; } .button04:hover::before, .button04:hover::after { width: 100%; background-color: #066590; }