WP5.3で検証

レイアウト要素

ボタン

デフォルト表示

ボタンの名前
<div class="wp-block-button">
	<a class="wp-block-button__link" href="#">ボタンの名前が入ります</a>
</div>

ブロック設定パネル

色設定
高度な設定

スタイル

塗りつぶし.is-style-fill
アウトライン.is-style-outline
アウトラインスタイル
<div class="wp-block-button is-style-outline">
	<a class="wp-block-button__link" href="#">アウトラインスタイル</a>
</div>

枠線設定
角丸半径をスライダーや数値で指定

角丸半径0
角丸半径12px
<div class="wp-block-button">
	<a class="wp-block-button__link no-border-radius" href="#">角丸半径0</a>
</div>

<div class="wp-block-button">
	<a class="wp-block-button__link" href="#" style="border-radius:12px">角丸半径12px</a>
</div>

リンク設定
タブで開く / rel属性

スタイル設定

標準スタイル

.wp-block-button {
    color:#fff
}

.wp-block-button.aligncenter {
    text-align:center
}

.wp-block-button.alignright {
    text-align:right
}

.wp-block-button__link {
    background-color: #32373c;
    border: none;
    border-radius: 28px;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    margin: 0;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    overflow-wrap:break-word
}

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color:inherit
}

.is-style-squared .wp-block-button__link {
    border-radius:0
}

.no-border-radius.wp-block-button__link {
    border-radius:0 !important
}

.is-style-outline {
    color:#32373c
}

.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border:2px solid
}

例）追加スタイルサンプル

ボタン文字の下線は、独自CSSで指定。

.wp-block-button a {text-decoration: none;}

ブロック制御コメント

<!-- wp:button -->
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<!-- /wp:button -->

<!-- wp:button {"borderRadius":0} -->
<!-- /wp:button -->

<!-- wp:button {"borderRadius":12} -->
<!-- /wp:button -->