フラットな左右ボタン
- RESULT
- HTML
- CSS
- コピー
<div class="msr_btn14"> <p class="left"> <a href="#"> </a> </p> <p class="right"> <a href="#"> </a> </p> </div>
- コピー
.msr_btn14{ height:80px; position:relative; } .msr_btn14 .left, .msr_btn14 .right{ display:block; margin:-40px 0 0 ; position:absolute; top:50%; } .msr_btn14 .left a, .msr_btn14 .right a{ width:50px; height:80px; display:block; background:#10C664; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .msr_btn14 .left{ left:0; } .msr_btn14 .right{ right:0; } .msr_btn14 .left a{ -webkit-border-radius:0px 6px 6px 0px ; -moz-border-radius:0px 6px 6px 0px ; border-radius:0px 6px 6px 0px ; } .msr_btn14 .right a{ -webkit-border-radius:6px 0px 0px 6px; -moz-border-radius:6px 0px 0px 6px; border-radius:6px 0px 0px 6px; position:relative; } .msr_btn14 .left a::before{ content: ''; width: 20px; height: 20px; margin:-12px -17px 0 0; border: 0px; border-bottom: solid 4px #fff; border-left: solid 4px #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display:block; position:absolute; top:50%; right:50%; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .msr_btn14 .right a::before{ content: ''; width: 20px; height: 20px; margin:-12px 0 0 -17px; border: 0px; border-top: solid 4px #fff; border-right: solid 4px #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display:block; position:absolute; top:50%; left:50%; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } /* hover */ .msr_btn14 .left a:hover, .msr_btn14 .right a:hover{ background:#fff; } .msr_btn14 .left a:hover::before{ border-bottom: solid 4px #10C664; border-left: solid 4px #10C664; } .msr_btn14 .right a:hover::before{ border-top: solid 4px #10C664; border-right: solid 4px #10C664; }
検証済みブラウザ
- Edge
- FF
- chrome
- Safari
スライダーのボタンや前後ページへの移動ボタンとしてお使いください。