Shortcodes Ultimate ボタンサンプル

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

Shortcodes Ultimateを使って作成したボタンのサンプルです。作成時の目安にしてください。

フラット

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="flat" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="flat" background="#ef892d" size="10" center="yes" icon="icon: file-image-o" text_shadow="2px 2px 2px #000000"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="flat" background="#ef892d" color="#fff" size="15" center="yes" icon="https://wp908.sakura.ne.jp/wp/wp-content/uploads/2018/06/i_132.gif" icon_color="#fff" text_shadow="2px 2px 2px #f4f4f4"]ヘッダー画像作成依頼[/su_button]

デフォルト

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" background="#ef892d" size="10" center="yes" icon="icon: file-image-o" text_shadow="2px 2px 2px #000000"]ヘッダー画像作成依頼[/su_button]

ゴースト

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="ghost" background="#ef892d" color="#000" size="10" center="yes" icon="icon: file-image-o" icon_color="#000"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="ghost" background="#ef892d" color="#000" size="10" center="yes" icon="icon: file-image-o" icon_color="#000" text_shadow="2px 2px 2px #f4f4f4"]ヘッダー画像作成依頼[/su_button]

ソフト

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="soft" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button]

ガラス

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="glass" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="glass" background="#ef892d" color="#fff" size="10" center="yes" icon="icon: file-picture-o" icon_color="#fff" text_shadow="2px 2px 2px #000"]ヘッダー画像作成依頼[/su_button]

泡

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="bubbles" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="bubbles" background="#ef892d" color="#fff" size="10" center="yes" icon="icon: file-picture-o" icon_color="#fff" text_shadow="2px 2px 2px #000"]ヘッダー画像作成依頼[/su_button]

ノイズ

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="noise" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button]

撫でる

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="stroked" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="stroked" background="#ef892d" color="#fff" size="10" center="yes" icon="icon: file-picture-o" icon_color="#fff" text_shadow="2px 2px 2px #000"]ヘッダー画像作成依頼[/su_button]

３D

[su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="3d" background="#ef892d" size="10" center="yes" icon="icon: file-image-o"]ヘッダー画像作成依頼[/su_button] [su_button url="https://wp908.sakura.ne.jp/wp/service/header/" style="3d" background="#ef892d" color="#fff" size="10" center="yes" icon="icon: file-picture-o" icon_color="#fff" text_shadow="2px 2px 2px #000"]ヘッダー画像作成依頼[/su_button]

Shortcodes by Angie Makes Primary

[wc_button type="primary" url="https://wp908.sakura.ne.jp/wp/service/header/" title="ヘッダー画像作成依頼" target="blank" url_rel="" icon_left="file-photo-o" icon_right="" position="center" class=""]ヘッダー画像作成依頼[/wc_button]

Shortcodes by Angie Makes Secondary

[wc_button type="secondary" url="https://wp908.sakura.ne.jp/wp/service/header/" title="ヘッダー画像作成依頼" target="" url_rel="" icon_left="file-photo-o" icon_right="" position="center" class=""]ヘッダー画像作成依頼[/wc_button]

Shortcodes by Angie Makes Inverse

[wc_button type="inverse" url="https://wp908.sakura.ne.jp/wp/service/header/" title="ヘッダー画像作成依頼" target="" url_rel="" icon_left="file-image-o" icon_right="" position="center" class=""]ヘッダー画像作成依頼[/wc_button]

ヘッダー画像作成依頼

]]>