Wixで使えるボタンのデザイン一覧!【4種類のボタンを既存のテンプレパーツで作成】

Wixで使えるボタンのデザイン一覧!

Wixの使い方はある程度知っているけど、「ボタンのデザインが上手く決まらない」「ボタンに動きをつけたり、グラデーションとかの設定はどうやるの?」と思い、調べてみたことがあります。

Wix公式のヘルプを参照しても中々、探している回答が見つからないんですよね…

そこで今回はWix内で簡単に使えるボタンのデザイン一覧をご紹介します!

目次

透過ボタン

まず始めに透過ボタンを作成します!
サイト編集 → 画面から画面左にあるツールバー → 「+」の追加ボタン → ボタン → おすすめボタンをクリック。

透過ボタン追加

画像の青いボタンを使用すればすでにホバー(マウスオン)時に透過する仕様になっています。
あとはお好みで色や透過の数値を変更するだけです。

通常時
通常時
ホバー時
ホバー時

反転ボタン

次に反転ボタンを作成します!流れは先程と同様です。
サイト編集 → 画面から画面左にあるツールバー → 「+」の追加ボタン → ボタン → おすすめボタンをクリック。

反転ボタン追加

画像の黒いボタンを使用すればすでにホバー(マウスオン)時に色が反転する仕様になっています。
あとはお好みで色を変更するだけです。

通常時
通常時
ホバー時
ホバー時

下線が出てくるボタン

次に下線が出てくるボタンを作成します!
サイト編集 → 画面から画面左にあるツールバー → 「+」の追加ボタン → ボタン → テキスト・アイコンボタンをクリック。

下線が出てくるボタン追加

画像のVIEW ALLボタンを使用すればすでにホバー(マウスオン)時に下線が出てくる仕様になっています。
あとはお好みで色やテキストを変更するだけです。

通常時
通常時
ホバー時
ホバー時

グラデーションボタン

次にグラデーションボタンを作成します!
サイト編集 → 画面から画面左にあるツールバー → 「+」の追加ボタン → ボタン → テキスト・アイコンボタンをクリック。

グラデーションボタン追加

画像のSay Helloボタンを使用すればすでにグラデーションの仕様になっています。
あとはお好みで色やテキストを変更するだけです。

通常時
通常時
ホバー時
ホバー時

まとめ

今回はWix内で簡単に使えるボタンのデザイン一覧を解説しました。
色々なデザインのボタンを追加するだけで作成できるのが便利ですよね。編集のスキルも加われば理想とするボタンが作れると思います。
ボタンの編集の仕方はこちらの記事で詳しく解説しているので合わせて読んでみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる