コピペで使えるリンク・ボタンのCSS＆サンプルコード10選～問い合わせや資料請求ボタンにも

リンクやボタンは、WEBサイトのデザインにおいて重要な要素のひとつです。分かりやすさはもちろん大事ですが、デザインを工夫することで、訪問者の目を引いたり、クリック率を向上させることができます。

基本的にシンプルでベーシックなボタンデザインをご紹介していますが、アニメーションを使った目を引くようなデザインのものも一部ご紹介しています。

サンプルコードはコピペで利用できます。お気軽にご活用ください。

使い方

HTML

HTMLはこちらをコピーしてご利用ください。
デザインサンプルはこのソースに対してCSSを適用させています。

<a href="#" class="btn">CLICK HERE</a>

CSS

後述する「デザインサンプル」のCSSをコピーしてご利用ください。
必要に応じて、好みのスタイルを追加してください。

デザインサンプル

四角ボタン、マウスオーバーで背景色が変わるシンプルボタン

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background-color: #41a4fd;
}
a.btn:hover {
  background-color: #0ee6ff;
}

a.btnはリンクの上にマウスがないときの状態です。
a.btn:hoverはリンクの上にマウスを合わせたときの状態です。

マウスを合わせたときに、背景色をbackground-color: #41a4fd;（青色）からbackground-color: #0ee6ff;（水色）に切り替えています。

四角ボタン、マウスオーバーで背景色が徐々に変わるシンプルボタン

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background-color: #41a4fd;
  transition: 0.5s;
}
a.btn:hover {
  background-color: #0ee6ff;
}

transition: 0.5s;でマウスを合わせたときに背景色が切り替わる時間を指定しています。0.5秒かけて、背景色が#41a4fd青色から#0ee6ff水色に切り替わります。

四角ボタン、シャドー付き

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background-color: #41a4fd;
  box-shadow: 0px 0px 10px #aaaaaa;
  transition: 0.5s;
}
a.btn:hover {
  background-color: #0ee6ff;
  box-shadow: none;
}

box-shadow: 0px 0px 10px #aaaaaa;でボタンに影を付けています。最初の0pxは横方向にずらす値、次の0pxは縦方向にずらす値です。今回どちらもずらしはありません。10pxでぼかしの範囲を指定しています。

マウスオーバー時はbox-shadow: none;で影をなくしています。

角丸ボタン、シャドー付き

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background-color: #41a4fd;
  box-shadow: 0px 0px 10px #aaaaaa;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn:hover {
  background-color: #0ee6ff;
  box-shadow: none;
}

border-radius:100vhでボタンの角を丸くしています。

角丸ボタン、グラデーションの背景色

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background-image: linear-gradient(to bottom, #41a4fd, #0ee6ff);
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn:hover {
  opacity: 0.6;
}

background-image: linear-gradient(to bottom, #41a4fd, #0ee6ff);でグラデーション背景を指定しています。to bottomは上から下に、#41a4fd青色から#0ee6ff水色にグラデーションをします。to top（下から上へ）、to right（左から右へ）、to left（右から左へ）、また45deg（45度の傾きで）といった設定も可能です。

角丸ボタン、マウスオーバーでテキストに光沢

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  background: #41a4fd;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn:hover {
  background: #3c97e6;
  text-shadow: 0px 0px 10px #ffffff;
  box-shadow: none;
}

text-shadow: 0px 0px 10px #ffffff;でテキストに白色の光沢（グロー効果）を付けています。最初の0pxは横方向にずらす値、次の0pxは縦方向にずらす値です。今回どちらもずらしはありません。10pxでぼかしの範囲を指定しています。

縁取りボタン、シャドー付き

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #41a4fd;
  font-size: 20px;
  font-weight: bold;
  border: 3px #41a4fd solid;
  box-shadow: 0px 0px 5px #41a4fd;
  transition: 0.5s;
}
a.btn:hover {
  color: #0ee6ff;
  border: 3px #0ee6ff solid;
  box-shadow: none;
}

border: 3px #41a4fd solid;で3pxの枠線を指定しています。solidは実線です。

縁取りボタン、メタル調のグラデーション背景色

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  border: 3px #41a4fd solid;
  background: linear-gradient(-45deg, #41a4fd, #0ee6ff, #41a4fd);
  transition: 0.5s;
}

a.btn:hover {
  text-shadow: 0px 0px 10px #ffffff;
}

background: linear-gradient(-45deg, #41a4fd, #0ee6ff, #41a4fd);でグラデーション背景を指定しています。-45degで45度の傾きがうまれます。色は、#41a4fd青色から#0ee6ff水色になり#41a4fd青色に戻ります。

縁取りボタン、動きのあるデザイン（マウスオーバーでボタンを移動）

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #41a4fd;
  font-size: 20px;
  font-weight: bold;
  border: 3px #41a4fd solid;
  transition: 0.5s;
}
a.btn:hover {
  color: #0ee6ff;
  border: 3px #0ee6ff solid;
  transform: translateX(3px);
}

transform: translateX(3px);でマウスオーバーしたときのボタンの位置をずらしています。translateXでX軸（横）方向に、3px移動します。

transition: 0.5s;で切り替わる時間を指定しています。0.5秒かけて移動するので、連続的に動くアニメーションになっています。

縁取りボタン、動きのあるデザイン（マウスオーバーで背景がキラリ）

a.btn {
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  border: 3px #41a4fd solid;
  background: linear-gradient(-45deg, #41a4fd, #0ee6ff, #41a4fd);
  background-size: 300%;
  background-position: left;
  transition: 0.5s;
}

a.btn:hover {
  animation: bgColorMove 1s forwards;
}

@keyframes bgColorMove {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}

アニメーションを実現するため、ソースコードが複雑になっています。

まず、background: linear-gradient(-45deg, #41a4fd, #0ee6ff, #41a4fd);でグラデーション背景を指定しています。-45degで45度の傾きがうまれます。色は、#41a4fd青色から#0ee6ff水色になり#41a4fd青色に戻りという指定です。

この背景をbackground-size: 300%;で大きくしています。ボタンの四角のなかで見えている背景色は、青色→水色→青色の全てではなく一部になっています。実際には青色→水色の途中くらいまでが見えています。

ロールオーバーしたときにアニメーションを実行させています。
animation: bgColorMove 1s forwards;はbgColorMoveの設定を1秒かけて実行しています。forwardsはアニメーションが終了した後の状態をそのまま保持するための設定です。

bgColorMoveの設定は@keyframes bgColorMoveに書かれています。
グラデーションをさせ、サイズを大きくした背景の位置を、background-position: left;左合わせから（from）、background-position: right;右合わせへ（to）に変更させます。

こうすることで、背景が左へ動きます。中間の水色部分が左へ流れることで、キラリとしたアニメーションとなります。

色やサイズ、角丸や枠線のスタイルを変えるだけでも、印象は変わります。自分のサイトに合わせてアレンジしてみてください！