カスタムコードを使用してボタンテキストに影を追加する方法

GemPagesの「概要」ボタンのテキストシャドウ

その ボタン要素内のテキスト CSS を使用してカスタマイズできます。 テキストの影 効果として、次のことができます。

• 背景が複雑な場合でもボタンのテキストが見やすくなるようにする
• よりモダンで高級感のあるデザインに仕​​上げる
• コールトゥアクションボタンの視覚的な階層構造を改善する
• 次のような重要な行動を強調します。 購入する, 商品をカートに追加または 今すぐ始める

このメソッドは以下で動作します GemPagesのボタン要素 ボタンのレイアウトを変更せずに、テキストの視覚的な印象を高めたい場合。

手順：ボタンテキストに影を追加する方法

ボタンのテキストに影の効果を適用するには、以下の手順を注意深く実行してください。

ステップ1：GemPagesエディターでページを開きます

あなたから GemPagesダッシュボード編集したいボタンが含まれているページを開きます。

動画内で ボタン要素 影を追加したいテキストが含まれている部分。

ステップ2：カスタムコードパネルを開く

右クリックして ボタン要素 テキストが含まれているもの。

その後：

• 選択 カスタムコード

• その CSSパネル が表示されます

このパネルを使用すると、そのボタンに固有のカスタムスタイルを追加できます。

ステップ3：要素クラスをコピーする

CSS パネルを開くと、 要素クラス 最初の行に。

次のようになります。

.gp-button-abc123

このクラス名をコピーしてください。次のステップで使用します。

ステップ4：テキストシャドウコードを貼り付ける

パネルに以下のカスタムCSSを追加してください。

その後：

• 交換する 要素クラス 実際のボタンクラスを使用して
• 詳しくはこちら Save

例えば、要素クラスが次のようになっている場合： .gp-button-abc123

最終的なコードは次のようになります。

.gp-button-abc123 {

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;

}

適用すると、ボタンのテキストに柔らかな影の効果が表示されます。

テキストシャドウ値の理解

その テキストの影 このプロパティには4つの値が含まれています。それぞれの値は、影の見え方を制御します。

テキストシャドウ: 2px 2px 4px rgba(0, 0, 0, 0.3);

各値の意味は以下のとおりです。

2px → 水平オフセット

影の移動距離を制御します 左または右.

例：

2px → 影を右に移動

-2px → 影を左に移動

2px → 垂直オフセット

影の移動距離を制御します 上か下.

例：

2px → 影を下方向に移動

-2px → 影を上に移動

4px → ぼかし半径

影の柔らかさや鮮明さを調整します。

例：

0px → シャープな影

4px → ソフトシャドウ

10px → 非常に柔らかな影

数値が大きいほど、影は柔らかくなります。

rgba(0, 0, 0, 0.3) → 影の色

影の色と透明度を制御します。

フォーマット：

rgba(赤、緑、青、不透明度)

例：

RGBA(0, 0, 0, 0.3)

手段：

• 赤：0
• 緑：0
• 青：0
• 不透明度：0.3（30%表示）

これにより、 半透明の黒い影.

カスタムの影の色を作成したい場合は、これらのツールを使用するとRGBA値を簡単に生成できます。

• https://rgbacolorpicker.com
• https://cssgradient.io
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com

これらのツールを使用すると、次のことができます。

• 視覚的に任意の色を選択してください
• 透明度（不透明度）を調整する
• コピー rgba(…) 価値を直接
• 使用する前にシャドウの色をプレビューしてください