フラットなアンカーリンクリスト

RESULT
HTML
CSS

コピー

<ul class="msr_list06 clearfix">
  <li><a href="#">button01</a></li>
  <li><a href="#">button01</a></li>
  <li><a href="#">button01</a></li>
</ul>

コピー

.msr_list06{
  margin:0 -10px;
}
.msr_list06 li{
  width:33.3%;
  padding:0 10px;
  display:inline-block;
  float:left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.msr_list06 li a{
  width:100%;
  padding:18px 0;
  color:#fff;
  font-size:16px;
  background:#1B73BA;
  border:2px solid #1B73BA;
  text-decoration:none;
  text-align:center;
  display:block;
  position:relative;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.msr_list06 li a::after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin-left: -3px;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.msr_list06 li a:hover{
  background:#fff;
  color:#1B73BA;
}
.msr_list06 li a:hover::after{
  border-bottom: solid 2px #1B73BA;
  border-right: solid 2px #1B73BA;
}