デザインでよく使うCSSボタン（四角・角丸・矢印あり/なし）のサンプルまとめ

私が仕事で一番よく使う、ベーシックなボタンのHTML・CSSをメモとしてまとめました。
画像で作ってしまうことも多々あるのですが、CSSで作ったほうが軽量ですし解像度の心配もありません。

cssで作るボタンと矢印デザインのまとめ
まとめ

cssで作るボタンと矢印デザインのまとめ

今回のサンプルでは、レスポンシブでも使えるようにフォントサイズはrootのフォントサイズを10pxとしたem、remベース。
またPCではhover時に色が変わるtransitionをつけました。（イメージサンプルのボタンは画像のためhoverは動きません。）

なるべくコピペ後の削除の手間を省くために、リセットCSSで記述ずみの可能性が高いプロパティやコメントは省くようにしています。

基本のボタン（四角・矢印なし）

まずはベースとなる基本のボタンです。こちらは角が四角形、ボタン内の矢印などの装飾なしです。aタグにCSSを指定しています。

<div class="btn01">
    <a href="">CLICK</a>
  </div>

.btn01 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  transition: 0.3s;
}
.btn01 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}

角丸のボタン（矢印なし）

基本のボタンに、角を丸くするborder-radiusを追加しました。

<div class="btn02">
    <a href="">CLICK</a>
  </div>

.btn02 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.3s;
}
.btn02 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}

丸のボタン（矢印なし）

基本のボタンから、border-radiusで両端を丸くしました。

<div class="btn03">
    <a href="">CLICK</a>
  </div>

.btn03 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
}
.btn03 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}

基本のボタン＋三角矢印（文字横）

基本のボタンのテキストのすぐ右に、三角矢印を追加しました。矢印は疑似要素で追加しています。
ボタンの角を丸くしたい場合は、aタグにborder-radiusを追加するのみです。

<div class="btn04">
    <a href="">CLICK</a>
  </div>

.btn04 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  transition: 0.3s;
}
.btn04 a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #000;
  margin-left: 5px;
}
.btn04 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}

CSSでの右向き三角の作りかた

右向きの三角矢印を作るには、borderの角が斜め線になる特徴を利用して、border-leftを作成し、border-top／border-bottomを透明にすることで作成できます。

基本のボタン＋くの字矢印（文字横）

基本のボタンのテキストのすぐ右に、くの字型の矢印を追加しました。矢印は疑似要素で追加しています。ボタンの角を丸くしたい場合は、aタグにborder-radiusを追加するのみです。

<div class="btn05">
    <a href="">CLICK</a>
  </div>

.btn05 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  transition: 0.3s;
}
.btn05 a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  transform: rotate(45deg);
  margin-left: 5px;
}
.btn05 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}

CSSでのくの字矢印の作りかた

CSSでくの字型の矢印の作り方は、borderで上と右の線で90度の矢印を作成し、rotateで45度傾けることで作成できます。

基本のボタン＋くの字矢印（ボタンの右端）

テキストのすぐ右側でなく、ボタンの右端にくの字型の矢印がついているパターンです。
疑似要素の矢印をpositionで右側に移動し、上下の中央に収めるためにtop:50%を指定した後にrotateのtranslateY(-50%)で矢印の縦幅半分だけ上に移動して調整しました。

<div class="btn06">
    <a href="">CLICK</a>
  </div>

.btn06 a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 300px;
  color: #333;
  font-size: 1.8rem;
  background-color: #d5c9bd;
  text-decoration: none;
  transition: 0.3s;
  position: relative;
}
.btn06 a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 1em;
}
.btn06 a:hover {
  text-decoration: none;
  background-color: #c5aa8f;
}