1

Colocar botões mais bonitos no lugar dessas setinhas de avançar e voltar.

 <div class="wrapper">
   <div class="header"><!--
   --><button class="prev go" data-go="-1" disabled>&larr;</button><!--
   --><span class="title">TABELA</span><!--
   --><button class="next go" data-go="1">&rarr;</button><!--
--></div>

Modelos_setas

5
  • Você pode mostrar o seu código todo? Caso contrário fica difícil saber o que vai dar certo para você ou não, ainda mais que o HTML que você postou não corresponde a tabela inteira. Também removi a tag java da sua pergunta porque (pelo menos do jeito que ela está), não tem relação nenhuma com java. Commented 23/07/2015 às 20:55
  • Minha pergunta foi mudada e com ela todo a ideia proposta, não quero que o botão desapareça, quero que o botão fique lá, pois as pessoas precisam ve-los para clicar e passar para a proxima rodada, seria o que postei no inicio, queria algo mais bonito do que essas duas setinhas. Commented 24/07/2015 às 0:19
  • 2
    Leandro, se você não concorda com a última edição, então o melhor é revertê-la (ou então editar novamente a pergunta para ficar como você acha que é melhor). As edições de conteúdos por aqui nunca deveriam contrariar a vontade de quem criou originalmente tais conteúdos. Commented 24/07/2015 às 1:03
  • Agradeço, a resposta do @Chun deu certo aqui;realmente com a mudança perdeu o sentido, mas a resposta em cima da pergunta inicial deu certo. Commented 24/07/2015 às 10:28
  • 1
    Leandro, reverti a última alteração na pergunta. Commented 24/07/2015 às 14:45

2 Respostas 2

1

Bom, respondendo à pergunta da maneira como ela se encontra agora - O disabled como o próprio nome o diz, é apenas para desativar/desabilitar um botão/input/etc. Para fazer com que o botão desapareça quando este está desativado, seria preciso adicionar o seguinte estilo CSS:

.go[disabled] {
    display:none;
}

Aqui selecionamos a class.go em vez da .prev para que o estilo seja aplicado em ambos os cenários, caso qualquer um dos botões se encontre desativado ele irá aplicar - display:none;.

Respondendo à pergunta original:

Para personalizar estes botões, basta criar o estilo CSS para os mesmos, por exemplo:

.go {background-color: royalblue; padding:5px 30px;}

No entanto existem certos estilos CSS que não se aplicam a botões <button> e/ou também estilos implementados já no navegador por padrão para a tag button que teríamos que removê-los para personalizá-los novamente à nossa maneira. Mas podemos sempre contornar isso usando boas práticas como utilizar uma div/a/span etc como botão em vez da tag button.

Como no exemplo destes botões abaixo criados com a tag <span>:

.animate {
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.random-button{
    position: relative;
    padding: 5px 30px;
    margin: 0px 10px;
    border-radius: 10px;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
}

.go {
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
    cursor:pointer;
}

.random-button:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}
<div class="wrapper">
    <div class="header">
        <span class="prev random-button animate go" data-go="-1" disabled>&larr;</span>
        <span class="title">TABELA</span>
        <span class="next random-button animate go" data-go="1">&rarr;</span>
    </div>
</div>

<br /><br />

<div class="wrapper">
    <div class="header">
        <span class="prev random-button animate go" data-go="-1" disabled>◄</span>
        <span class="title">TABELA</span>
        <span class="next random-button animate go" data-go="1">►</span>
    </div>
</div>

Ou podes até utilizar imagens como botão, como no exemplo do link desta resposta.

1
-1

Quando o input fica desativado disabled no atributo, por padrão CSS3, o input fica mais "transparente", por isso a seta que é preta virou cinza ficando um pouco mais transparente.

Para esconder o botão quando tem atributo disabled basta colocar esse CSS no seu site:

.go[disabled] {
    visibility: hidden;
}

ou deixando ele transparente por 50% (prefiro dessa forma):

.go[disabled] {
    opacity: 0.5; /* 50% */
}
4
  • a ideia dos botões deu certo, só não entendi o porque de continuar dentro dessa caixa cinza ai. Commented 23/07/2015 às 21:19
  • "..de continuar dentro.." não entendi, explica melhor? Seria o porque o botão anterior continua aparecendo? Commented 23/07/2015 às 21:23
  • Sim... Em outro lugar funciona o desenho blz, mas quando coloco no local, a seta continua a mesma, porém só muda a cor, tipo a cor que escolhi da seta. Commented 23/07/2015 às 21:47
  • Tem que melhorar a sua pergunta, pois me pareceu que você pretende melhorar o estilo dos botões. Enfim, quando o input fica desativado disabled no atributo, por padrão CSS3 nos navegadores, o input, fica mais "transparente", por isso a seta que é preta virou cinza ficando um pouco mais transparente. Para esconder o elemento, basta colocar isso no seu CSS seguinte: .go[disabled] { visibility: hidden } OBS: melhorei a resposta Commented 23/07/2015 às 22:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .