注目を集める画像：
（ところで、ボタンに大きなテキストを追加しようとすると、興味深いバグが見つかりました。ボタン上のテキストは文字「」を消化しません。）
テキストの中でボタンが一貫していないように見えるため、最初の欲求とアクションはボタンの兆候を完全に削除することでした。 ボタンを導入する目的について考えた後（単純なリンクとは異なり、そのCSS遷移を単純な画像で偽装できないように）、すべての要件を満たすソリューションを見つけました-コンパクト、テキストのような、ボタンのような、CSS遷移の両方。 5月22日の夜（スタイルのバージョン）からそのような透明なボタンを持っているZenCommentユーザーをインストールしたユーザーだけでなく、トランジションが見えるように、リンクの以前のアイデアに有機的にフィットするソリューションを見つけました。 2.42）。 ボタンがリンクである場合よりも、ボタンが明るく透明のままであれば、さらに良くなりました。
ビデオ（4分、音なし）。
「続きを読む」リンクのサイト上の標準デザインボタンのデザインとアニメーション（最初の2分）とコンパクトな透明ボタン（2時04分以降）を比較します。 3: 07 -HabrAjax + ZenCommentと同じボタン。 これらのボタンや他のボタンが実際にどのように知覚されるかについて、おおよその考えを示します。 スクリーンキャストを削除するときのさまざまなスクロール遅延のため、非常に近似しています。 元のサイズは640 x 480だったため、フルスクリーンで見ると、残りは比較的高品質です。
（スタイリストに関する以前のビデオ-ZenCommentの前身はその重要性を失っていませんが、今では音楽を使って8分でさらに面白くなりました： www.youtube.com/watch ?v=nBmTcN7mP-c。）
長いボタンの場合に表示されるもの：
マウスにカーソルを合わせるとどうなりますか：
ボタンがこのソリューションのリンクのように見えるのはなぜですか？ 彼女は実際にはリンクだからです。 Ctrlを右クリックまたはホールドすることにより、別のウィンドウで開くことができます。 そして、これは実際のボタン（および入力タグ）である場合よりも便利です。 これがリンクであるというユーザーの信頼を維持するために、リンクの色、透明な背景、およびテキスト行のサイズが選択されます。
もちろん、大きなボタンを使用すると、スマートフォンや、大画面でより快適に感じられ、占有された場所に寛大な態度を取ります。 しかし、何が最重要ですか？ Habrオプションボタンはブートストラップスタイルで、Mac、Win7、およびスマートフォンとの互換性の間で妥協が行われます。 古いバージョンのHabrと提案されたボタンのリンクボタンは、競合する要件のサイトを満たしますが、古典的なページデザインに対応すると同時に追加のセキュリティ上の考慮事項を伴う追加スペースの占有をサポートしません。
既存のボタンデザインをビデオに表示されているものに作り直すことは、レイアウトデザイナーにとって20分以内です（さらに、すべてのブラウザーでテストするために数時間かかります）。 多くの人がこのタイプのボタンのインストールだけをサポートし、日中のボタンに関する質問（管理者が決定する場合）は解決されると思います。
すでにユーザースタイルでこのボタンを配置して試してみたい人のために、コードが提供されています。 これは、サイトの決定を伴うスタイルの要素に基づいており、実際、スタイルの要素と大差ありません。
/** haButtons v1_2012-05-22, FF3.6+, Opera11+, Safari5, Chrome, IE9 * Author: spmbt, http://spmbt.habr.ru/ */ @namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("habrahabr.ru"){ .buttons a.button, .buttons input:disabled:active, .buttons input{padding:0 10px!important} .post .content .buttons{ display:inline-block!important;padding:0!important} .post .content .buttons a.button{ margin-left: 2px!important; padding:0 2px 1px!important; border:0!important; border-radius:2px!important; background:transparent!important; color:#6da3bd!important; box-shadow: 0 0 2px rgba(255,255,255,0.4) inset, 0 0 2px rgba(0,0,0,0.2)!important} .post .content .buttons a.button:hover{background:#f4f4f9!important} .post .content .buttons a.button:visited{color:#b96!important} }
Firefox以外でこれらのスタイルを使用するには、「@ -moz-document」という単語の後の波括弧内のルールを使用する必要があります。 Firefoxの場合-すべてのコードを新しいスタイリッシュなアドオンユーザースタイルにコピーします。
（別のバグレポート、ソースバグとBRに非常に似ています：コード内の「@」文字が<hh user = ...に変わります）
時折、デザインに関するトピックで-発表。 通り過ぎるデザイナー！ そして、よく読まれるHabrのデザインに無関心ではありません。 2つのかなり深刻な社会的に有用なタスクがあります。
1. Habr の 新しいデザイン 、非公式、既存のものに結び付けられていない。 3か月後に実装される予定です。
2. ZenCommentユーザー - スタイルデザイン -少しの色補正。 すぐに実装できます。
（「次へ」ボタンにアクセスできる許可されていないユーザーがスタイルを使用できるように、投稿はハブオフトピック「Habrabhabr」に配置されませんでした。）