Button customization

Well, answering the question the way it is now - disabled as the name itself says, is just to disable / disable a / input / etc button. To make the button disappear when it is disabled, you would need to add the following CSS style:

.go[disabled] {
    display:none;
}

Here we select the class .go instead of .prev so that the style is applied in both scenarios, if any of the buttons is disabled it will apply - display:none; .

Answering the original question:

To customize these buttons, simply create the CSS style for them, for example:

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

However there are certain CSS styles that do not apply to <button> buttons and / or also styles already deployed in the browser by default for the button tag we would have to remove them to customize them again our way. But we can always work around this by using best practices like using a div/a/span etc as a button instead of the button tag.

As in the example of the following buttons created with the 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>

Or you can even use images as a button, as in the link example of this answer .

When the input is disabled by% s in the attribute, by default CSS3, disabled becomes more "transparent", so the arrow that is black turned gray becoming a bit more transparent.

To hide the button when you have input attribute, just put this CSS on your site:

.go[disabled] {
    visibility: hidden;
}

or leaving it transparent for 50% (I prefer it that way):

.go[disabled] {
    opacity: 0.5; /* 50% */
}