web-dev-qa-db-ja.com

プライマリナビゲーションリンクをボタンのようにするにはどうすればよいですか？

最近、ウェブサイトのナビゲーションバーを刷新しました。リンクをフラットテキストではなくクリック可能なボタンのように表示する簡単な変更を検討しています。それぞれにアイコンを追加しましたが、さらに一歩進める必要があると思います。

テキストシャドウ（インセットとオフセット）、さまざまな色などをいじってみましたが、思いどおりに機能するものはありません。

enter image description here

任意のアイデアをいただければ幸いです。

navigationhyperlinks
2
Nick S.

HTMLの構造

HTMLではボタン（<button>）またはリンク（<a>）は、アクセシビリティ、SEOなどに影響を与える個別の要素です。一般に、HTMLボタンを使用して「作業」を行い、HTMLリンクを使用して「場所を移動」します。あなたのケースでは、HTMLリンクを使用してください。

ビジュアルデザイン

利用できるオプションは次のとおりです。

  1. 触覚デザイン：ライトシャドウとボーダーを使用して、各ボタンに「隆起」した外観を与えます。テクスチャを追加することで、触感を高めることもできます。
  2. 予想される場所：ページの上部にボタンを配置し、ページ上に他の明らかなナビゲーションセンターがない場合、多くのユーザーはボタンが予期された場所にあり、近くに混乱がないため、ボタンであると正しく理解します。
  3. 明確な分離：アイコンが大きすぎます。それらを縮小して、パネルをきれいに見せ、各オプションのテキストとアイコンをより明確にグループ化します。
3
sscirrus

押しやすさを示唆する視覚的な合図として機能する多くのスタイルがあります。ベベル、ドロップシャドウ、丸みのある光沢（アップルスタイル）など。ページ全体のスタイルと連動するスタイルが必要です。

あなたの場合、1つの可能性は、アイコンの高さをすべて同じにして（エキスポの「X」が高すぎるように見える）、テキストのサイズを小さくすることです。アイコンは強調されます（アイコンは慣例によりクリック可能です）が、テキストは読みやすくなります。

別のオプションは、それらをタブにすることです。必要なのは、「これらはすべてナビゲーションタブであること」を示すために、選択されたアイテムの周りの単一のタブ形状です。または、ブラウザのように各オプションの周りにタブを配置することもできますが、これは必ずしも必要ではなく、スペースを占有するため、タイトな場合があります。

ここに行くには多くの方法があります、あなたはあなたのサイトに最も合うものを決定しなければなりません。そして、強引なことはしないでください。それらがナビゲーションリンクであることはすでにいくらか明らかであるため、その明白性を高めるために少し強調するだけで済みます。

1
obelia

リンクをボタンのように見えるようにする必要があるかどうかを判断する際に、質問のコメントを再度参照しますが、先に進むことに決めた場合、これには2つの側面があります。1つは外観です（外観はボタンのように見えます）。 2つ目は動作です（ボタンのように機能します）。技術的な実装の問題があり、ボタンとまったく同じように表示できない場合でも、その動作を変更することを検討できます（例：マウスオーバーまたはリンクをクリックしたときの外観）。スクリーンショットからは、画面とレイアウトの制約があるため、リンクをどこに配置したかによってデザインを変えることが難しくなる可能性があるようにも見えますが、情報が参考になります。

0
Michael Lai

あなたはcss3に取り組んだことがありますか？ HTML 5を使用していますか？ HTML 5には他にもいくつかのオプションがあるかもしれませんが、私はそれらを認識していません。ただし、CSS（グラデーションを含む：D）を使用してテキストをボタン化する方法についてのアイデアは次のとおりです（これはすべてではありませんが、始めるための何かです）。 HTH

    border: 1px Solid #3B7882; 
border-radius:4px; 
width: 90px; 
height:27px;
color: #FFFFFF;
background-color: #909090;
margin: 9px 2px 0 0;
width: 4%;
height : 2%;
float: left;
border-top-left-radius: 6%;
border-top-right-radius: 6%;
padding-top: 10px;
padding-bottom: 12px;
cursor: pointer;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, rgba(134,130,122,0)), /* Top */
color-stop(0, rgba(134,150,101,45)) /* Bottom */
);
/* for IE  */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#368655E, endColorstr=#848176)";
background: -ms-linear-gradient(top left, #368655E, #848176);
0
happybuddha