ボタンブロック:まとめ

2,041 views

使い方!

  1. 専用プラグインをインストールして有効化
  2. コピーボタンをクリック
  3. 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