ウェブサイトにグラデーションの境界線を持つボタンを追加する方法
P粉621033928
2023-09-05 20:41:10
<p>私の問題は、ボタンが非常に小さく表示され、下で高さや幅を調整しても効果がないことです。 </p>
<p>Elementor を使用して WordPress サイトにコードを入力しました。HTML ウィジェットをドラッグして以下のコードを貼り付けました。 </p>
<p>
<pre class="brush:css;toolbar:false;">.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 {
色: 白;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<button class="btn" data="クリックしてください"></button>
</div></pre>
</p>
ページ上の元のボタンよりもボタンを大きくしました (.btn に高さと幅を書き込むだけです)。