コーディング豆知識【ボタン編】
背景が右からスライド
HTML
<div class="btn1"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
.btn1 .btn-link{ position: relative; display: inline-block; width: 100px; padding: 8px 0; text-align: center; box-sizing: border-box; border-radius: 50px; border: 1px solid #333; text-decoration: none; font-weight: bold; overflow: hidden; } .btn1 .btn-link::before{ content: ""; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; transition: .2s; border-radius: 50px; background: #efedf2; } .btn1 .btn-link:hover::before{ width: 100%; } .btn1 .btn-link::after{ content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); -webkit- transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6.9px; border-color: transparent transparent transparent #333; } .btn1 .btn-link span{ position: relative; }
下線が右からスライド
HTML
<div class="btn2"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
.btn2 .btn-link{ position: relative; display: inline-block; text-decoration: none; padding-right: 10px; font-size: 110%; } .btn2 .btn-link::before{ content: ''; position: absolute; display: inline-block; bottom: -3px; left: 0; width:0; height: 1px; background-color: #333; transition: .2s; } .btn2 .btn-link::after{ content: ''; position: absolute; top: 58%; right: -5px; transform: translateY(-50%); -webkit- transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 5.2px; border-color: transparent transparent transparent #333; } .btn2 .btn-link:hover::before{ width: 100%; } .btn2 .link-btn span{ position: relative; }
透明な背景がが右からスライド
HTML
<div class="btn3"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
.btn3 .btn-link{ position: relative; color: #fff; font-weight: bold; width: 100px; padding: 8px 0; text-align: center; box-sizing: border-box; display: inline-block; border-radius: 30px; background-color: #333; text-decoration: none; } .btn3 .btn-link::before{ content: ""; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: hsla(0,0%,100%,.2); transition: .2s; border-radius: 50px; } .btn3 .btn-link::after{ content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); -webkit- transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent #fff; } .btn3 .btn-link:hover::before{ width: 100%; } .btn3 .btn-link span{ position: relative; }
背景が黒に変わって文字は白に変わる
HTML
<div class="btn4"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
.btn4 .btn-link{ display: inline-block; width: 150px; text-align: center; color: #252525; background: #fff; padding: 15px 0; font-weight: bold; border: 2px solid #252525; } .btn4 .btn-link:hover{ color: #fff; background: #252525; text-decoration: none; } .btn4 .btn-link .arrow-down{ position: relative; } .btn4 .btn-link .arrow-down:after{ display: inline-block; position: absolute; top: 0; right: -25px; content: "→"; font-weight: bold; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
背景のグラデーションが横に変わる
HTML
<div class="btn5"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
@keyframes change-bg-x { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-webkit-keyframes change-bg-x { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .btn5{ text-align: center; } .btn5 .btn-link{ display: inline-block; width: 200px; padding: 8px 0; box-sizing: border-box; color: #fff; background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); background-size: 600% 600%; animation: change-bg-x 15s infinite; -webkit-animation: change-bg-x 15s infinite; } .btn5 .btn-link span{ position: relative; }
背景のグラデーションが縦に変わる
HTML
<div class="btn6"> <a href="javascript:void(0)" class="btn-link"><span>more</span></a> </div>
css
@keyframes change-bg-y { 0%{background-position:50% 0%} 50%{background-position:50% 100%} 100%{background-position:50% 0%} } @-webkit-keyframes change-bg-y { 0%{background-position:50% 0%} 50%{background-position:50% 100%} 100%{background-position:50% 0%} } .btn6{ text-align: center; } .btn6 .btn-link{ display: inline-block; width: 200px; padding: 8px 0; box-sizing: border-box; color: #fff; background: linear-gradient(#fffdb8, #fed6e3, #fadbdb, #c9c8fd, #b9e6fb, #e3fdf5, #abecd6, #fbed96); background-size: 600% 600%; animation: change-bg-y 10s ease infinite; -webkit-animation: change-bg-y 10s ease infinite; } .btn6 .btn-link span{ position: relative; }