Tufte-css: suporte de elemento de botão

Estou intrigado com a ideia. Eu estaria interessado em ouvir um pouco mais sobre casos de uso – especificamente, como âncoras não são suficientes – bem como ideias e contribuições.

O botão vermelho “Download Quilt” do ImageQuilt (http://imagequilts.com, perto da parte inferior) pode ser um ponto de partida decente.

Os links representam uma conexão e um ponto de salto para outro conteúdo (seja na página, por meio de âncora ou off, por meio de propriedades href). Os botões são acionadores para ações que afetam o conteúdo atual . A IMO aderindo a essas convenções mantém as coisas claras. IOW Eu acho que um botão é necessário.

Digamos que eu queira apresentar um gráfico junto com a opção de filtrar seus dados de uma determinada maneira. Clicar no botão alternaria o filtro e o conteúdo em mãos, o gráfico interativo, seria atualizado de acordo com seus dados recém-alterados (e vinculados).

Acho que é uma questão de tempo até que essa questão seja resolvida. Não há necessidade de deixá-lo aberto. Eu tenho usado tufte-css para o meu site há algum tempo e estou muito satisfeito com os resultados. Em breve, abordarei o estilo dos botões para um projeto em que estou trabalhando e decidirei usar links ou propor (pull request) outra coisa.

👍
Interessado em saber que tipos de botões você criou. Acho que parte do problema com o desenvolvimento de uma solução geral é que cada visualização/tabela/gráfico terá seu próprio estilo personalizado que é difícil de atribuir _a priori_.

Eu criei os seguintes estilos para botões de rádio e regulares para um aplicativo que estou escrevendo, buscando clareza de intenção e harmonização com o estilo de estrutura existente.

Referindo-se à captura de tela abaixo:

• Botões normais, por exemplo, o botão PLAY, têm uma borda escura sólida (#111).
• Os botões de opção (opção) são contornados com um traço quando não selecionados (o botão 9x9) e invertidos (fundo #111 e texto colorido #FFFFF8) quando selecionados (o botão 5x5).

@gamecubate Aconteceu de fazer a mesma coisa com botões na minha implementação. Funciona para mim, mas como uma implementação geral, os estilos podem entrar em conflito com gráficos que designam os participantes por variações na linha (tracejada, pontilhada, sólida, etc). Se alguém tiver um botão que envolva um participante específico, pode valer a pena estilizá-lo para corresponder.

@frostbitten Verdade. Pode-se também começar a usar cores para os participantes. Eu entendo a hesitação de @daveliepmann em codificar um estilo padrão para botões. Há tantos casos de uso.

Desculpe por ressuscitar este problema, mas eu também estava curioso sobre isso.

Eu tenho um projeto usando este e os botões foram totalmente sem estilo no início, principalmente com o CSS padrão. Os estilos aplicados aparentemente foram da "folha de estilo do agente do usuário". (Isso pode ser uma peculiaridade da versão do Google Chrome que estou executando.)

Eu encontrei adicionar este CSS para funcionar bem:

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

Exemplo:

O botão parece um botão, mas tem uma fonte mais agradável (do que Arial) e agora se encaixa bem com o restante do conteúdo estilizado.

Não consegui encontrar o botão "Download Quilt" na página ImageQuilts mencionada . Parece que faz parte de uma extensão do Google Chrome. Mas eu gosto do visual em geral. Não consegui fazer com que uma fonte em negrito e itálico funcionasse com a fonte padrão CSS deste projeto.

Também gosto do exemplo do @gamecubate . @gamecubate – você se importaria de compartilhar o CSS?

@kenny-evitt Claro. Aqui está, em todo o seu esplendor. :)

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