CTAボタンのHTML・CSSサンプル（WordPressでも使用可能）

<a href="http://www.example.com/" class="cta-button">今すぐダウンロード</a>

<a href="http://www.example.com/" class="cta-button">今すぐダウンロード</a>

.cta-button {
  display: block; /* ブロック要素指定 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  background-color: #4CAF50; /* 信頼性のある緑色 */
  color: white !important; /* テキスト色を白に強制指定 */
  padding: 1rem 1rem; /* パディングを1remに */
  width: 240px; /* 横幅を240pxに */
  font-weight: bold; /* テキストを太字に */
  text-align: center; /* テキストを中央配置に */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
}

<a href="http://www.example.com/" class="flat-button">今すぐダウンロード</a>

.flat-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  text-align: center; /* テキストを中央配置に */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  padding: 1rem 1rem; /* パディングを1remに */
  background-color: #000033; /* 背景色を濃いグレーに */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  border: none; /* 境界線なし */
}

<a href="http://www.example.com/" class="transparent-button">今すぐダウンロード</a>

.transparent-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  text-align: center; /* テキストを中央配置に */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  padding: 1rem 1rem; /* パディングを1remに */
  background-color: #FFA500; /* 背景色をオレンジ色に */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  border: none; /* 境界線なし */
  border-radius: 5px; /* 角の丸みを5pxに設定 */
  border-bottom: 7px solid #E67E22;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 背景色と影の変化にアニメーションを設定 */
}

.transparent-button:hover {
    background-color: #FFA500; /* 同じオレンジ色 */
    opacity: 0.7; /* 透明度を下げる */
}

<a href="http://www.example.com/" class="standout-button">今すぐダウンロード</a>

.standout-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  text-align: center; /* テキストを中央配置に */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  padding: 1rem 1rem; /* パディングを1remに */
  background-color: #4CAF50; /* 背景色を緑色に */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  border: none; /* 境界線なし */
  border-radius: 5px; /* 角の丸みを5pxに設定 */
  border-bottom: 7px solid #388E3C; /* ボタンの下側に影を作る */
  transition: all 0.1s ease; /* ボタンの影の変化にアニメーションを設定 */
}

.standout-button:hover {
  background-color: #4CAF50; /* 同じ緑色 */
  transform: translateY(4px); /* ボタンを下に少し動かす */
  border-bottom: 7px solid transparent; /* border-bottomを透明にする */
}

<a href="http://www.example.com/" class="ghost-button">今すぐダウンロード</a>

.ghost-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  padding: 1rem 1rem; /* パディングを1remに */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  border: 2px solid #222222; /* 細い境界線 */
  background-color: transparent; /* 背景色を透明に */
  color: #000000 !important; /* テキスト色 */
  font-weight: bold; /* テキストを太字に */
  border-radius: 4px; /* 角の丸み */
  text-align: center; /* テキストを中央配置に */
  transition: all 0.1s ease; /* 背景色と境界線の色の変化にアニメーションを設定 */
}

.ghost-button:hover {
  background-color: #222222; /* ホバー時の背景色 */
  color: white !important; /* ホバー時のテキスト色 */
}

<a href="http://www.example.com/" class="reverse-button">今すぐダウンロード</a>

.reverse-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  padding: 1rem 1rem; /* パディングを1remに */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  background-color: #222222; /* 背景色を濃いグレーに */
  border: 2px solid transparent; /* デフォルトで透明な境界線を設定 */
  color: white !important; /* テキスト色 */
  font-weight: bold; /* テキストを太字に */
  border-radius: 4px; /* 角の丸み */
  text-align: center; /* テキストを中央配置に */
  transition: all 0.1s ease; /* 背景色と境界線の色の変化にアニメーションを設定 */
}

.reverse-button:hover {
  background-color:  transparent; /* ホバー時の背景色 */
  border: 2px solid #222222; /* 細い境界線 */
  color: #222222 !important; /* ホバー時のテキスト色 */
}

<a href="http://www.example.com/" class="diagonal-gradient-button">今すぐダウンロード</a>

.diagonal-gradient-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  padding: 1rem 1rem; /* パディングを1remに */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  text-align: center; /* テキストを中央配置に */
  font-weight: bold; /* テキストを太字に */
  color: white !important; /* テキスト色を白に強制指定 */
  background-image: linear-gradient(45deg, #FFA500, #FF4500); /* 斜め方向のグラデーション */
  border: none; /* 境界線なし */
  border-radius: 5px; /* 角の丸みを5pxに設定 */
  transition: background-image 0.5s ease; /* 背景グラデーションの変化にアニメーションを設定 */
}

.diagonal-gradient-button:hover {
  background-image: linear-gradient(45deg, #FF4500, #FFA500); /* ホバー時のグラデーションを逆方向に */
}

<a href="http://www.example.com/" class="swipe-button">今すぐダウンロード</a>

.swipe-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  padding: 1rem 1rem; /* パディングを1remに */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  text-align: center; /* テキストを中央配置に */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  background-image: linear-gradient(to right, #6a82fb 50%, #a8d2ff 50%); /* 背景のデュアルトーン */
  border: none; /* 境界線なし */
  border-radius: 5px; /* 角の丸みを5pxに設定 */
  transition: background-position 0.3s ease; /* 背景位置の変化にアニメーションを設定 */
  background-size: 200% 100%; /* 背景サイズを調整 */
}

.swipe-button:hover {
  background-position: -100% 0; /* ホバー時に背景を移動 */
}

<a href="http://www.example.com/" class="flat-button">今すぐダウンロード</a>

.flat-button {
  display: block; /* ブロック要素指定 */
  width: auto; /* 自動でサイズ調整 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  text-align: center; /* テキストを中央配置に */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  padding: 1rem 1rem; /* パディングを1remに */
  background-color: #000033; /* 背景色を濃いグレーに */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  border: none; /* 境界線なし */
}

<div class="container">
<a href="http://www.example.com/" class="flat-button">今すぐダウンロード</a>
<a href="http://www.example.com/" class="flat-button">今すぐダウンロード</a>
<a href="http://www.example.com/" class="flat-button">今すぐダウンロード</a>
</div>

.container {
  display: flex;
  justify-content: center; /* 子要素を水平方向に中央揃えにする */
  align-items: center; /* 子要素を垂直方向に中央揃えにする */
}

/* 画面サイズが768px以下のとき */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* ボタンを縦並びに配置 */
  }
}

.flat-button {
  display: block; /* ブロック要素指定 */
  width: auto; /* 横幅を自動調整 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 影を薄く（透明度15%）追加 */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  text-align: center; /* テキストを中央配置に */
  margin:20px; /* 20pxの余白を */
  padding: 1rem 1rem; /* パディングを1remに */
  background-color: #000033; /* 背景色を濃いグレーに */
  color: white !important; /* テキスト色を白に強制指定 */
  font-weight: bold; /* テキストを太字に */
  border: none; /* 境界線なし */
}