ボタン|白い内線

193 views

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

構造詳細

クラス名
bf-btn--white-inborder
CSS
.wp-block-buttons.bf-btn--white-inborder {
    margin: 0 auto 2rem;
}
.wp-block-buttons.bf-btn--white-inborder .wp-block-button {
    margin-bottom: 0;
}
.bf-btn--white-inborder .wp-block-button__link {
    position: relative;
    margin-bottom: 0;
    padding: 1rem 2.5rem;
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0,0,0,0.15);
}
.bf-btn--white-inborder .wp-block-button__link:before {
    display: inline-block;
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: calc(100% - 0.5rem);
    height: calc(100% - 0.5rem);
    border: 1px solid;
    border-radius: inherit;
    opacity: 0.54;
    content: "";
    box-sizing: border-box;
}

使い方

導入方法

  1. コピーボタンをクリック
  2. 投稿画面(エディタ)で右クリックしてプレーンテキストとして貼り付け

ー動画(予定)ー

オリジナルスタイルのルール

クラス名の付け方

  • 原則として使用するクラス名は1つとする
  • クラス名からは役割がわかるものとする
  • クラス名からはデザインのイメージがわかるものとする
  • 接頭語はbf-とする
  • デザインを意味する部分は–で繋ぐ
  • 詳細度は高め(ただしbodyなど広範囲に影響するのはNG)

CSSの書き方

  • 余白の値はできるだけremまたはpx
  • デフォルトカラー(うすめ)は#eee
  • デフォルトカラー(こいめ)は#333
  • colorとbackgroundは色設定から変更できることを頭に入れておく
  • 疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
  • importantは最低限なら使ってもいいと思う

関連記事