ウェブサイトにグラデーションの境界線を持つボタンを追加する方法
P粉621033928
P粉621033928 2023-09-05 20:41:10
0
1
560
<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>
P粉621033928
P粉621033928

全員に返信(1)
P粉985686557

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

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!