ウェブサイトにグラデーションの境界線を持つボタンを追加する方法

Question

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

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 {
  色: 白;
}

<div class="container">
  <button class="btn" data="クリックしてください"></button>
</div>

Answer 1

ページ上の元のボタンよりもボタンを大きくしました (.btn に高さと幅を書き込むだけです)。

リーリー リーリー