Tufte-css: ボタン要素のサポート

私はその考えに興味をそそられます。 ユースケース、具体的にはアンカーが十分でない方法、およびアイデアや貢献についてもう少し聞きたいと思います。

ImageQuiltの赤い「キルトのダウンロード」ボタン（http://imagequilts.com、下部近く）は、まともなジャンプポイントかもしれません。

リンクは、他のコンテンツへの接続とジャンプポイントを表します（ページ内、アンカー経由、またはオフ、hrefプロパティ経由）。 ボタンは、現在のコンテンツに影響を与えるアクションのトリガーです。 IMOはそのような慣習に固執し、物事を明確に保ちます。 IOWボタンが必要だと思います。

特定の方法でデータをフィルタリングするオプションとともにグラフを表示したいとします。 ボタンをクリックすると、フィルターが切り替わり、手元のコンテンツであるインタラクティブチャートが、新しく変更された（およびバインドされた）データに従って更新されます。

この質問が解決するのは時間の問題だと思います。 開いたままにする必要はありません。 私はしばらくの間自分のサイトにtufte-cssを使用していて、その結果に非常に満足しています。 私が取り組んでいるプロジェクトのボタンのスタイルについてはすぐに説明し、リンクの使用を決定するか、別の提案（プルリクエスト）を行います。

👍
あなたが思いついたボタンの種類を聞いて興味があります。 一般的なソリューションを開発する際の問題の一部は、各ビジュアライゼーション/テーブル/チャートに独自のカスタムスタイルがあり、事前に割り当てるのが難しいことだと思います。

私が書いているアプリのラジオと通常のボタンには次のスタイルを考え出し、意図の明確さと既存のフレームワークスタイルとの調和の両方を目指しました。

以下のスクリーンショットを参照してください。

• PLAYボタンなどの通常のボタンには、濃い色（＃111）の境界線があります。
• ラジオ（オプション）ボタンは、選択されていない場合（9x9ボタン）はダッシュで囲まれ、選択されている場合（5x5ボタン）は反転（＃111背景および＃FFFFF8カラーテキスト）で囲まれています。

@gamecubate実装のボタンでも、たまたま同じことをしました。 私にとっては機能しますが、一般的な実装として、スタイルは、線のバリエーション（破線、点線、実線など）によって参加者を指定するグラフと競合する可能性があります。 特定の参加者と連動するボタンがある場合は、それに合わせてスタイルを設定する価値があるかもしれません。

@frostbittenTrue 。 参加者に色を使い始めるかもしれません。 @daveliepmannがボタンの標準スタイルをハードコーディングすることをためらっていることを理解しています。 非常に多くのユースケースがあります。

この問題を復活させて申し訳ありませんが、私もこれについて興味がありました。

私はこれを使用するプロジェクトを持っており、ボタンは最初はほとんど標準のCSSで完全にスタイルが設定されていませんでした。 明らかに適用されたスタイルは、「ユーザーエージェントスタイルシート」からのものでした。 （これは、私が実行しているGoogle Chromeのバージョンの癖かもしれません。）

このCSSを追加するとうまく機能することがわかりました。

button {
  font-family: inherit;
  font-size:   inherit;
  padding:     0.5em;
}

例：

ボタンはボタンのように見えますが、（Arialよりも）より快適なフォントを備えており、他のスタイル付きコンテンツとうまく調和するようになりました。

上記のImageQuiltsページに[キルトのダウンロード]ボタンが見つかりませんでした。 GoogleChrome拡張機能の一部のようです。 しかし、私は一般的に見た目が好きです。 このプロジェクトの標準フォントCSSで動作する太字のイタリックフォントを取得できませんでした。

@gamecubateの例も好きです。 @gamecubate – CSSを共有していただけませんか？

@kenny-evittもちろんです。 ここに、そのすべての素晴らしさがあります。 :)

.btn {
  border: 2.5px solid #111;
  color: #111;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 5px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
}

.btn.large {
  border: 3px solid #111;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 5px;
  padding: 15px;
}

.btn.mini {
  border: 1px solid #111;
  color: #111;
  min-width: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.btn.radio {
  border-style: dashed;
}

.btn.selected {
  background: #111;
  color: #FFFFF8;
}

.btn.white {
  background: #FFFFF8;
  color: #111;
}

.btn.flash {
  background: #EEE!important;
}

.btns {
  margin: 3px 0;
}

.btns .btn:first-child {
  margin-left: 0;
}

.btns .btn:last-child {
  margin-right: 0;
}

.btns.stack {
  margin: 15px 0 20px 0;
}

.btns.stack > .btn {
  display: block;
  margin: 5px 0;
}

a {
  font-size: 1.5rem;
  color: #111;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid #111;
}