WooCommerceの「カートに追加」ボタンとダブルボーダー効果

ファンシーWooCommerces."カートに入れる「ボタンをもっと魅力的に？ダブルボーダーデザインをお試しください。このスタイルはボタンをより重層的に見せ、全体的な視覚効果を高め、顧客にクリックの衝動を与えます。

このプロフェッショナルなデザイン効果を簡単に実現できる簡単なCSSコードをご紹介します。また、互換性の問題を心配する必要はありません。この方法は、あらゆる種類の携帯電話やコンピューターで完璧に表示されます。

I. なぜダブルボーダーボタンを使うのですか？

ひときわ目立つ通常のボタンよりも視認性が高いため、ユーザーを素早く購入に導くことができる。
テクスチャを追加するダブルボーダーは、高級ブランドのページでよく使われ、上質感を表現する。
柔軟な適応必要なのはカスケーディングスタイルシートプラグインなしででき、すべてのテーマで動作する！

II. 実現の原則

ダブルボーダーは通常、次のようにして作られる。概要もしかしたら ボックスシャドウ HTMLとCSSはボーダーのプロパティを直接サポートしていないからです。一般的な方法

利用する概要外枠の実装
利用する ボックスシャドウ 外枠シャドウ効果の生成
利用する 擬似要素 ::before / ::after 2層目のボーダーを作る

コードの実装方法

以下 「カートに入れる」ボタン たとえば、デフォルトの WooCommerce テーマでは .single_add_to_cart_button クラス。

方法1：アウトラインを使ってダブルボーダーを作る

.woocommerce button.single_add_to_cart_button { {.
    border: 2px solid #0073aa; /* インナーボーダー */
    outline: 4px solid #ffffff; /* 外側の枠線 */
    outline-offset: -6px; /* 外枠をボタンに近づける */
    ボーダー半径: 4px; /* 外枠
}

説明する：

ボーダー 内側のボーダーの幅と色を定義する
概要 外枠の幅と色を定義する
アウトライン・オフセット マイナスにすることで、外側のボーダーが内側のボーダーに密着し、二重の効果が生まれる

方法2：ボックスシャドウを使った二重ボーダー

.woocommerce button.single_add_to_cart_button { {.
    box-shadow: 0 0 4px #ffffff; /* inner border */
    box-shadow: 0 0 0 4px #ffffff; /* 外枠 */ b
    box-shadow: 0 0 0 4px #ffff; /* 外枠 */ border-radius: 4px；
}

説明する：

ボックスシャドウ な 0 0 0 0 4px はオフセットもぼかしもなく、外側の4pxのベタ塗りシャドウだけが追加される。

方法3：疑似要素を使って二重ボーダーを作る（より柔軟性がある）

.woocommerceボタン.single_add_to_cart_button{
    position: relative; border: 2px solid #0073aa; /* インナーボーダー */
    border: 2px solid #0073aa; /* インナーボーダー */
    border-radius: 4px；
    z-index: 1；
}

.woocommerceボタン.single_add_to_cart_button::after { 以下のようにします。
    content: ""；
    position: absolute; top: -4px; } .woocommerceボタン.
    top: -4px；
    left: -4px；
    right: -4px；
    bottom: -4px; border: 2px solid #ffff; /* 外側の境界線
    border: 2px solid #ffff; /* 外側の境界線 */
    border-radius: 6px; /* 外側の境界線は内側より少し大きく丸められます */
    z-index: -1；
}

説明する：

利用する ::after 外枠の生成
とおす 上/左/右/下 外枠の位置を定義する
外層の角の丸みの半径は、視覚的な調和を確保するため、内層のそれよりもわずかに大きい。

IV.コードの追加場所

WordPressバックエンド → 外観 → カスタマイズ

エクストラCSS」をクリック"

上記のコードを貼り付けて ポスト

V. レスポンシブ・テストと最適化

セットアップが完了したら、テストしてください：

デスクトップ、タブレット、モバイル 表示効果
テーマボタンのホバー、アクティブ状態との互換性
ボーダーの位置がずれている場合は、アウトラインオフセットまたは擬似要素の上下左右の値を調整します。

VI.よくある質問

Q1.アウトラインとボックスシャドウはどちらが良いですか？

概要スペースは取らないが、いくつかブラウザテストが必要だ。
ボックスシャドウ レンダリングはより安定し、ぼかしを加えて光り輝く効果を得ることができる。

Q2.改造後、ボタンのレイアウトが崩れているが？

ボタンスタイルを追加する：

box-sizing: border-box；

ボーダーとパディングが要素の幅と高さの合計内で計算されるようにする。

はんけつをくだす

とおすカスケーディングスタイルシートセットアップWooCommerce"カートに入れる「ボタンのダブルボーダー効果は、視覚的なインパクトを高めるだけでなく、ユーザーのブランドに対する印象を向上させます。EコマースのUIをデザインする際、ボタンのスタイルの詳細はページの質感を決定し、最適化に時間を投資する価値があります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み