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>←</span>
<span class="title">TABELA</span>
<span class="next random-button animate go" data-go="1">→</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.