プレビュー
HTMLコード
CSSコード
#000000
2 px
24 px
#ffffff
2 px
ウェブサイトに訪れたユーザーに行動してもらうために設置する「コールトゥアクション(CTA)ボタン」は、コンバージョンを高める重要な要素です。デザイン性の高いボタンは、視覚的にユーザーの目を引き、クリック率を向上させます。ここではジェネレーターを使って簡単に美しいCTAボタンを作成できます。背景は、CTAでよく使われるグラデーションを用意しました。
背景グラデーションや文字色、フォントサイズ、角丸など、デザインの細部まで自由にカスタマイズ可能。作成したボタンは、HTMLコードとCSSコードをすぐにコピーしてプロジェクトに取り入れることができます!
使い方
- ボタンテキストを入力
- 「ボタンテキスト」欄に、ボタン内に表示したい文字を入力します。
(例: 「今すぐ購入」「お問い合わせはこちら」など)
- 「ボタンテキスト」欄に、ボタン内に表示したい文字を入力します。
- 背景グラデーションを選択
- 用意されたカテゴリから、ボタンの背景に適したグラデーションを選択します。
直感的に選べるカード形式で、デザインのイメージをつかみやすくなっています。
- 用意されたカテゴリから、ボタンの背景に適したグラデーションを選択します。
- ボーダー(枠線)を設定
- ボーダーカラーを色選択ツールで指定します。
- 枠線の太さを「ボーダー幅」で調整可能です。
- フォントサイズと文字色を設定
- 「フォントサイズ」で文字の大きさを自由に調整します。
- 「文字色」を変更して、背景グラデーションとのコントラストを確保します。
- 角丸を設定
- ボタンの「角丸」設定で、丸みのあるデザインや直線的なデザインを選択可能です。
- プレビューを確認
- 設定したデザインはリアルタイムでプレビューに反映されます。
- 実際の表示イメージを確認しながら調整してください。
- HTMLコードとCSSコードをコピー
- 完成したボタンのHTMLコードとCSSコードが自動生成されます。
- 「HTMLをコピー」「CSSをコピー」ボタンを押して、コードを簡単に取得し、ウェブサイトに貼り付けるだけで完了です!