使い方！
- 専用プラグインをインストールして有効化
コピーボタンをクリック- 「Shift + Ctrl + V」でテキストとして投稿画面で貼り付け
このページのもくじ
ノーマル
①100％
タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color" href="#" style="border-radius:50px;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#60a7d6"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#60a7d6;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#76ced3"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#76ced3;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#ffc266"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#ffc266;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#f28d79"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#f28d79;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%)"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%)"}},"className":"bfbtn-100par","plusbfClassName":"bfbtn-100par","plusbfStyle":".wp-block-button.bfbtn-100par {\n width: 100%;\n margin: 0;\n}\n.wp-block-buttons .block-editor-inner-blocks .bfbtn-100par.wp-block-button {\n width: 100%;\n}\n.bfbtn-100par .wp-block-button__link {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-100par .wp-block-button__link:before {\n position: absolute;\n right: 1rem;\n font-family: \u0022font awesome 5 free\u0022;\n font-weight: 600;\n content: \u0022\\f138\u0022;\n}"} -->
<div class="wp-block-button bfbtn-100par"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
②内線
タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color" href="#" style="border-radius:50px;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#60a7d6"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#60a7d6;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#76ced3"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#76ced3;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#ffc266"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#ffc266;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#f28d79"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#f28d79;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%)"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%)"}},"className":"bfbtn-extension","plusbfClassName":"bfbtn-extension","plusbfStyle":".bfbtn-extension .wp-block-button__link {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension .wp-block-button__link:before {\n content: \u0022\u0022;\n position: absolute;\n display: inline-block;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n left: .25rem;\n top: .25rem;\n border-radius: inherit;\n box-sizing: border-box;\n opacity: .54;\n}"} -->
<div class="wp-block-button bfbtn-extension"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
③内線+透け
タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color" href="#" style="border-radius:50px;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#60a7d6"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#60a7d6;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#76ced3"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#76ced3;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#ffc266"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#ffc266;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","background":"#f28d79"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background-color:#f28d79;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%)"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%)"}},"className":"bfbtn-extension-lightwhite","plusbfClassName":"bfbtn-extension-lightwhite","plusbfStyle":".bfbtn-extension-lightwhite .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n text-decoration: none;\n}\n.bfbtn-extension-lightwhite .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n z-index: 0;\n width: calc(100% - 0.5rem);\n height: calc(100% - 0.5rem);\n border: 1px solid;\n border-radius: inherit;\n background-color: rgb(255 255 255 / 38%);\n opacity: 0.54;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-extension-lightwhite"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:50px;background:linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
④立体
タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color" href="#" style="border-radius:16px;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","background":"#60a7d6"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background-color:#60a7d6;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","background":"#76ced3"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background-color:#76ced3;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","background":"#ffc266"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background-color:#ffc266;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","background":"#f28d79"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background-color:#f28d79;color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%)"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background:linear-gradient(135deg,rgb(96,167,214) 0%,rgb(118,206,211) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":16,"style":{"color":{"text":"#fefefe","gradient":"linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%)"}},"className":"bfbtn-dimensional","plusbfClassName":"bfbtn-dimensional","plusbfStyle":".bfbtn-dimensional .wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.75rem 3rem;\n box-shadow: inset -4px -4px 4px 4px rgba(0 0 0 / 10%);\n text-decoration: none;\n}\n.bfbtn-dimensional .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n box-shadow: inset 4px 4px 4px 4px rgb(255 255 255 / 20%);\n content: \u0022\u0022;\n}"} -->
<div class="wp-block-button bfbtn-dimensional"><a class="wp-block-button__link has-text-color has-background" href="#" style="border-radius:16px;background:linear-gradient(135deg,rgb(255,194,102) 0%,rgb(242,141,121) 100%);color:#fefefe" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
⑤ずれ
タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"className":"bfbtn-deviatedline is-style-outline","plusbfClassName":"bfbtn-deviatedline","plusbfStyle":".wp-block-button.bfbtn-deviatedline.is-style-outline a.wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.5rem 3rem;\n border-width: 1px;\n font-weight: 500;\n text-decoration: none;\n}\n.bfbtn-deviatedline .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.4rem;\n left: 0.4rem;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-right: 1px solid;\n border-bottom: 1px solid;\n border-radius: inherit;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-deviatedline is-style-outline"><a class="wp-block-button__link no-border-radius" href="#" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#60a7d6"}},"className":"bfbtn-deviatedline is-style-outline","plusbfClassName":"bfbtn-deviatedline","plusbfStyle":".wp-block-button.bfbtn-deviatedline.is-style-outline a.wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.5rem 3rem;\n border-width: 1px;\n font-weight: 500;\n text-decoration: none;\n}\n.bfbtn-deviatedline .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.4rem;\n left: 0.4rem;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-right: 1px solid;\n border-bottom: 1px solid;\n border-radius: inherit;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-deviatedline is-style-outline"><a class="wp-block-button__link has-text-color no-border-radius" href="#" style="color:#60a7d6" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#76ced3"}},"className":"bfbtn-deviatedline is-style-outline","plusbfClassName":"bfbtn-deviatedline","plusbfStyle":".wp-block-button.bfbtn-deviatedline.is-style-outline a.wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.5rem 3rem;\n border-width: 1px;\n font-weight: 500;\n text-decoration: none;\n}\n.bfbtn-deviatedline .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.4rem;\n left: 0.4rem;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-right: 1px solid;\n border-bottom: 1px solid;\n border-radius: inherit;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-deviatedline is-style-outline"><a class="wp-block-button__link has-text-color no-border-radius" href="#" style="color:#76ced3" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#ffc266"}},"className":"bfbtn-deviatedline is-style-outline","plusbfClassName":"bfbtn-deviatedline","plusbfStyle":".wp-block-button.bfbtn-deviatedline.is-style-outline a.wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.5rem 3rem;\n border-width: 1px;\n font-weight: 500;\n text-decoration: none;\n}\n.bfbtn-deviatedline .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.4rem;\n left: 0.4rem;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-right: 1px solid;\n border-bottom: 1px solid;\n border-radius: inherit;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-deviatedline is-style-outline"><a class="wp-block-button__link has-text-color no-border-radius" href="#" style="color:#ffc266" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->タイトル
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#f28d79"}},"className":"bfbtn-deviatedline is-style-outline","plusbfClassName":"bfbtn-deviatedline","plusbfStyle":".wp-block-button.bfbtn-deviatedline.is-style-outline a.wp-block-button__link {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n align-items: center;\n margin-bottom: 0;\n padding: 0.5rem 3rem;\n border-width: 1px;\n font-weight: 500;\n text-decoration: none;\n}\n.bfbtn-deviatedline .wp-block-button__link:before {\n display: inline-block;\n position: absolute;\n top: 0.4rem;\n left: 0.4rem;\n z-index: 0;\n width: 100%;\n height: 100%;\n border-right: 1px solid;\n border-bottom: 1px solid;\n border-radius: inherit;\n content: \u0022\u0022;\n box-sizing: border-box;\n}"} -->
<div class="wp-block-button bfbtn-deviatedline is-style-outline"><a class="wp-block-button__link has-text-color no-border-radius" href="#" style="color:#f28d79" target="_blank" rel="noreferrer noopener">ボタンサンプル</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |