Tufte-css: 按钮元素支持

我对这个想法很感兴趣。 我很想听听更多关于用例的信息——特别是，锚是如何不够用的——以及想法和贡献。

ImageQuilt 的红色“下载被子”按钮（http://imagequilts.com，靠近底部）可能是一个不错的起点。

链接代表到其他内容的连接和跳转点（无论是在页内，通过锚点，还是通过 href 属性关闭）。 按钮是影响当前内容的动作的触发器。 IMO 坚持这样的约定让事情变得清晰。 IOW 我认为需要一个按钮。

假设我想展示一个图表以及以某种方式过滤其数据的选项。 单击该按钮将切换过滤器，并且手头的内容（交互式图表）将根据其新更改（和绑定）的数据进行更新。

我认为这个问题得到解决只是时间问题。 无需将其打开。 我已经在我的网站上使用 tufte-css一段时间了，对结果非常满意。 我将很快解决我正在处理的项目的按钮样式问题，并将解决使用链接或提出（拉取请求）其他内容。

👍
有兴趣听听您想出什么样的按钮。 我认为开发通用解决方案的部分问题在于，每个可视化/表格/图表都有自己的自定义样式，很难先验地分配。

我为正在编写的应用程序提出了以下单选按钮和常规按钮样式，力求使意图清晰并与现有框架样式协调一致。

参考下面的截图：

• 常规按钮，例如 PLAY 按钮，具有实心深色 (#111) 边框。
• 单选（选项）按钮在未选中时（9x9 按钮）用短划线勾勒出来，在选中时（5x5 按钮）用短划线勾勒出来（#111 背景和#FFFFF8 彩色文本）。

@gamecubate我碰巧在我的实现中对按钮做了同样的事情。 它对我有用，但作为一般实现，样式可能与通过线的变化（虚线、点线、实线等）指定参与者的图形发生冲突。 如果一个按钮有一个与特定参与者互动的按钮，那么将其样式设置为匹配可能是值得的。

@frostbitten是的。 人们也可能会开始为参与者使用颜色。 我理解@daveliepmann对硬编码按钮的标准样式的犹豫。 有很多用例。

很抱歉让这个问题复活，但我也对此感到好奇。

我有一个使用这个的项目，一开始按钮完全没有样式，主要是标准的 CSS。 应用的样式显然来自“用户代理样式表”。 （这可能是我正在运行的 Google Chrome 版本的一个怪癖。）

我发现添加这个 CSS 可以很好地工作：

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

例子：

该按钮看起来像一个按钮，但具有更令人愉悦的字体（比 Arial 字体），并且现在与其他样式内容非常吻合。

我在提到的 ImageQuilts 页面上找不到“下载被子”按钮。 它看起来像是 Google Chrome 扩展程序的一部分。 但我总体上喜欢这种外观。 我无法使用该项目的标准字体 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;
}