フラットな左右ボタン

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;
}