私の問題は、ボタンが非常に小さく表示され、下で高さや幅を調整しても効果がないことです。

Elementor を使用して WordPress サイトにコードを入力しました。HTML ウィジェットをドラッグして以下のコードを貼り付けました。

.container { 高さ: 100vh; 幅: 100vw; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 背景色: 白; } .btn { パディング: 20px 60px; 境界線: なし。 概要: なし。 位置: 相対的; z インデックス: 1; 境界半径: 5px; 背景: 線形グラデーション(右へ、#00FFA3、#DC1FFF); カーソル: ポインタ; } .btn::before { コンテンツ： ""; 位置: 絶対; 左: 1px; 右: 1px; 上: 1px; 下: 1px; 境界半径: 4px; 背景色: 白; z インデックス: -1; トランジション: 200ms } .btn::after { 内容: 属性(データ); フォントサイズ: 16px; 背景: 線形グラデーション(左へ、#00FFA3、#DC1FFF); -webkit-background-clip: テキスト; 色: 透明; トランジション: 200ms } .btn:hover::before { 不透明度: 50%; 上: 0px; 右: 0px; 下: 0px; 左: 0px; } .btn:ホバー::後{ 色: 白; } ボディ .コンテナ { 高さ: 10vh; 幅: 20vw; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 背景色: 白; } 本文 .btn { パディング: 20px 60px; 境界線: なし。 概要: なし。 位置: 相対的; z インデックス: 1; 境界半径: 5px; 背景: 線形グラデーション(右へ、#00FFA3、#DC1FFF); カーソル: ポインタ; } 本文 .btn::before { コンテンツ： ""; 位置: 絶対; 左: 1px; 右: 1px; 上: 1px; 下: 1px; 境界半径: 4px; 背景色: 白; z インデックス: -1; トランジション: 200ms; } 本文 .btn::after { 内容: 属性(データ); フォントサイズ: 16px; 背景: 線形グラデーション(左へ、#00FFA3、#DC1FFF); -webkit-background-clip: テキスト; 色: 透明; トランジション: 200ms; } 本文 .btn:hover::before { 不透明度: 50%; 上: 0px; 右: 0px; 下: 0px; 左: 0px; } 本文 .btn:hover::after { 色: 白; }