ページ内でリンクを貼るボタン

ボタンもウィジェットを設置することで簡単に実装できます。サイト内の回遊、外部サイトへのリンク、他にもポップアップを開いたり、メーラーを開いたり、通話ツールを立ち上げるなども可能です。

 

 

コンテンツでの設定

コンテンツ設定ではボタン内のテキスト、またそのボタンのリンク先の設定をします。
またテキストの左右どちらかの横に置くアイコンを設定することもできます。

 

スタイル

ボタンウィジェットで特に作業が多いのが [スタイル] かと思います。マウスオーバーからホバーアクションも設定できます。ボタンなどリンクするもの、目立たせたいものにカーソルを合わせると動きやエフェクトをつけることでユーザーの目を引くボタン・CTAになります。

 

ここでの設定を見ていきます。

⚫︎ Fixed Size:Height, Widthでサイズ指定、Horizontal Align, Vertical Alignでボタン内の文字の位置を指定

⚫︎ 配置:ウィジェット内のボタンの位置を設定

⚫︎ タイポグラフィ:見出しウィジェットと同じ

⚫︎ Text Shadow:文字へのシャドウの設定

⚫︎ 文字色・Background Typeは通常時と、マウスオーバー時でそれぞれ設定可能

⚫︎ Border Type:なし/単色(1色)/ダブル/点線/破線/Groove

⚫︎ 枠線の丸み:上下左右でそれぞれでの設定が可能

⚫︎ Box Shadow:ボタン自体へのシャドウをかける設定

⚫︎ パディング:ボタンの中のパディング指定で微調整が可能

 

マウスオーバーから⚫︎ホバー時のアニメーションという設定が可能です。つい押したくなるようなボタンでコンバージョンへつなげていくことが可能です。

 


次回:開始アニメーションについて

recent post

画像を好きな形に切り抜く「マスク機能」の使い方

謎のすき間の正体は?ウィジェットスペースとカラムギャップ設定の使い分け

「背景オーバーレイ」で画像上の文字の可読性を上げる方法

画像が重なる・ボタンが押せない!を解決する z-index(z-インデックス)

ただの箇条書きを卒業!「アイコンリスト」ウィジェット

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901