デフォルト表示
<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>
枠線設定
角丸半径をスライダーや数値で指定
<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 -->