スタイリッシュなボタン02

RESULT
HTML
CSS

button02

コピー

<p class="msr_btn10">
  <a href="#">button02</a>
</p>

コピー

.msr_btn10 a {
  background-color: #FFFFFF;
  border:1px solid #999999;
  color: #333333;
  display: block;
  font-size: 14px;
  padding: 14px;
  position:relative;
  text-align: center;
  text-decoration: none;
  width: 230px;
}
.msr_btn10 a:before {
  background:#333333;
  border-bottom:0px solid transparent;
  border-left:0px solid transparent;
  border-right:8px solid transparent;
  border-top:#FFFFFF 8px solid;
  content: "";
  display: inline-block;
  height: 0;
  right: 0;
  margin:-5px 0 0;
  position: absolute;
  bottom: 0;
  vertical-align: middle;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 0;
}
/* マウスオーバー */
.msr_btn10 a:hover:before {
  border-bottom:0px solid transparent;
  border-left:0px solid transparent;
  border-right:20px solid transparent;
  border-top:#FFFFFF 20px solid;
  content: "";
}