CSSで作る矢印を組み合わせたボタンエリアを作る方法【コピペOK】

CSSだけで作った矢印（→）をボタンエリア内に表示させ、マウスオーバーするとtransformでボタンエリアの色を反転させる方法をご紹介します。
CSSをコピペするだけでOKなので簡単に流用できます。試してみて下さい。

CSSだけで作る矢印を組み合わせたボタンエリアの記述

※ボタンエリア（a.btn）のCSS記述です。矢印（→）やマウスオーバー時にtransformでボタンエリアの色を反転させてます。ボタンエリア、フォントサイズ、色等を必要に応じて変更して下さい。

<style>
body{
  text-align: center;
  font-size: 28px;
  line-height: 1.8em;
  font-weight: bold;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0 30px 0;
  font-size: 16px;
}

/*** 以下、ボタンエリアのCSS ***/
a.btn{
  display: block;
  width: 200px;
  height: 60px;
  margin: 0 auto;
  color: #000000;
  border: solid 2px #000000;
  box-sizing: border-box;
  line-height: 58px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a.btn::before,
a.btn::after{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a.btn::before{
  right: 19px;
  width: 19px;
  height: 1px;
  background: #000000;
}
a.btn::after{
  right: 20px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
a.btn:hover{
  background-color: #000000;
  color: #ffffff;
}
a.btn:hover::before{
  background: #ffffff;
}
a.btn:hover::after{
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
</style>

CSSだけで作る矢印を組み合わせたボタンエリアを作るHTMLの記述

※aタグにclass=”btn”を追記するだけです。必要に応じて変更して下さい。

<h1>CSSで作った矢印（→）をボタンエリア内に表示させてます。<br>マウスオーバーするとtransformで色を反転させます。</h1>

<a class="btn" href="./">ボタン</a>

CSSで作った矢印（→）をボタンエリア内に表示させ、マウスオーバーするとtransformで色を反転させるデモページ

CSSで作った矢印（→）をボタンエリア内に表示させ、マウスオーバーするとtransformで色を反転させるデモページ

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。