L-008 Layout simple

How to create a cta banner section CTAバナーの作り方

CTA section with distinct background and action button. 目立つ背景とアクションボタンを持つCTA（Call To Action）セクション。

cta banner call to action marketing

ライブデモ Live Demo

Start your journey today

Join thousands of designers creating amazing experiences with Vibe UI.

Get Started for Free

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

CTA section with distinct background and action button.

目立つ背景とアクションボタンを持つCTA（Call To Action）セクション。

どこで使うかWhere to use

landing page, marketing site, portfolio, product page

ランディングページ、プロモーションバナー、アナウンスバー、メールキャプチャ

特徴Key features

Full-width call-to-action banner with gradient background, headline, body copy, and CTA button. Flexbox layout centers content. Responsive text sizing with clamp(). Optional dismissible close button.

グラデーション背景・見出し・本文・CTAボタンを持つフル幅コールトゥアクションバナー。Flexboxレイアウトでコンテンツをセンタリング。clamp()でレスポンシブテキストサイズ。オプションで閉じられるクローズボタン。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--cta-bg-start—Gradient start color
--cta-bg-end—Gradient end color

実装コード Implementation Code 

// react/L-008.jsx
import './L-008.css';

export default function CTABanner({ title, description, buttonText, buttonLink = '#' }) {
  return (
    <section className="cta-section">
      <div className="cta-content">
        <h2>{title}</h2>
        <p>{description}</p>
        <a href={buttonLink} className="cta-button">{buttonText}</a>
      </div>
    </section>
  );
}
/* react/L-008.css */
/* L-008: React styles */
.cta-section {
  background: linear-gradient(135deg, #1d2242 0%, #3a4276 100%);
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.cta-section h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: #fff;
}

.cta-section p {
  font-size: 18px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.8);
}

.cta-button {
  display: inline-block;
  background: #fff;
  color: #1d2242;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
import './L-008.css';

export default function CTABanner({ title, description, buttonText, buttonLink = '#' }) {
  return (
    <section className="cta-section">
      <div className="cta-content">
        <h2>{title}</h2>
        <p>{description}</p>
        <a href={buttonLink} className="cta-button">{buttonText}</a>
      </div>
    </section>
  );
}
/* L-008: React styles */
.cta-section {
  background: linear-gradient(135deg, #1d2242 0%, #3a4276 100%);
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.cta-section h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: #fff;
}

.cta-section p {
  font-size: 18px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.8);
}

.cta-button {
  display: inline-block;
  background: #fff;
  color: #1d2242;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A full-width section uses a CSS gradient background (linear or radial). Content is centered using flexbox with flex-direction: column and align-items: center. The CTA button uses a contrasting color to stand out. If dismissible, a close button updates display: none and persists the dismissed state in localStorage.

フル幅のセクションがCSSグラデーション背景（linearまたはradial）を使用。コンテンツはflex-direction:columnとalign-items:centerのflexboxでセンタリング。CTAボタンはコントラストカラーで目立つように設定。閉じられる場合、クローズボタンがdisplay:noneを更新しlocalStorageに非表示状態を保存。

カスタマイズ方法Customization

Swap the solid gradient for an animated gradient background (hue-rotate keyframes). Add a countdown timer inside the banner for time-limited promotions. Use a two-column layout for a wider CTA with left text and right button.

ソリッドグラデーションをアニメーションするグラデーション背景（hue-rotate keyframes）に変更。期間限定プロモーション用にバナー内にカウントダウンタイマーを追加。左テキスト右ボタンの幅広いCTA用に2列レイアウトを使用。

注意点Caveats

Avoid using autoplay animations in promotional banners as they distract from the main content. If the banner is dismissible, ensure the close button has a clear accessible label (e.g., aria-label="Close promotional banner").

メインコンテンツから注意を逸らすため、プロモーションバナーでのオートプレイアニメーションの使用を避けてください。バナーが閉じられる場合、クローズボタンに明確なアクセシブルラベル（例：aria-label="プロモーションバナーを閉じる"）を設定してください。

よくある質問 Frequently Asked Questions

How to customize the cta banner section? CTA Banner Sectionをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the cta banner section in React? ReactでCTA Banner Sectionを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of cta banner section? CTA Banner Sectionのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.