Tufte-css: button element support

I'm intrigued by the idea. I'd be interested in hearing some more about use cases—specifically, how anchors do not suffice—as well as ideas and contributions.

ImageQuilt’s red “Download Quilt” button (http://imagequilts.com, near the bottom) might be a decent jumping off point.

Links represent a connection and jumping point to other content (whether in-page, via anchor, or off, via href properties). Buttons are triggers for actions affecting the current content. IMO sticking to such conventions keeps things clear. IOW I think a button is needed.

Say I want to present a chart along with the option of filtering its data in a certain way. Clicking the button would toggle the filter and the content at hand, the interactive chart, would be updated according to its newly changed (and bound) data.

I think it's a matter of time before this question is settled. No need to leave it opened. I've been using tufte-css for my site for a while now and am very satisfied with the results. I will soon address the styling of buttons for a project I am working on and will either settle on using links or propose (pull request) something else.

👍
Interested to hear what kinds of buttons you come up with. I think part of the problem with developing a general solution is that each visualization/table/chart will have its own custom styling that is difficult to assign _a priori_.

I came up with the following styles for radio and regular buttons for an app I am writing, striving for both clarity of intent and harmonization with the existing framework style.

Referring to the screenshot below:

• Regular buttons, e.g., the PLAY button, have a solid dark (#111) border.
• Radio (option) buttons are outlined with a dash when not selected (the 9x9 button) and inversed (#111 background and #FFFFF8 color text) when selected (the 5x5 button).

@gamecubate I happened to do the same thing with buttons in my implementation. It works for me but as a general implementation the styles might conflict with graphs that designate participants by variations in the line (dashed, dotted, solid, etc). If one had a button that engages with a specific participant it might be worthwhile to style it to match.

@frostbitten True. One might also start using color for participants. I understand @daveliepmann's hesitation to hard-code a standard style for buttons. There are so many use cases.

Sorry for resurrecting this issue but I was also curious about this.

I have a project using this one and buttons were entirely unstyled at first with mostly the standard CSS. The styles applied apparently were from the "user agent stylesheet". (This might be a quirk of the version of Google Chrome I'm running.)

I found adding this CSS to work nicely:

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

Example:

The button looks like a button, but has a more pleasant font (than Arial) and now fits nicely with the rest of the styled content.

I couldn't find the "Download Quilt" button on the ImageQuilts page mentioned. It looks like it's part of a Google Chrome extension. But I like the look generally. I couldn't get a bold italic font to work with the standard font CSS from this project.

I also like @gamecubate's example. @gamecubate – would you mind sharing the CSS?

@kenny-evitt Sure thing. Here it is, in all its splendor. :)

.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;
}