Customization of buttons

Asked

Viewed 1,946 times

1

Put more beautiful buttons in place of these forward and back arrows.

 <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

html css

  • Can you show me all your code? Otherwise it is difficult to know what will work for you or not, even more than the HTML you posted does not match the entire table. I also removed the java tag from your question because (at least the way it is), it has no relation to java.

  • My question was changed and with it the whole idea proposed, I do not want the button to disappear, I want the button to stay there, because people need to see them to click and move to the next round, would be what I posted at the beginning, wanted something more beautiful than these two little arrows.

  • 2

    Leandro, if you do not agree with the latest edition, then it is best to reverse it (or else edit the question again to look like you think it is best). Content edits here should never contradict the will of those who originally created such content.

  • Thank you, the @Chun answer worked here;really with the change lost its meaning, but the answer on top of the initial question worked.

  • 1

    Leandro, I reversed the last amendment to the question.

2 answers

1


Well, answering the question the way she is now - The disabled as its name says, it is only 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, just 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 buttons <button> and/or also styles already implemented in the default browser for the tag button we would have to remove them to customize them again our way. But we can always get around this using good practices like using a div/a/span etc as button instead of tag button.

As in the example of these buttons below 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, like in example of the link to this reply.

-1

When input is disabled disabled in the attribute, by default CSS3, the input becomes more "transparent", so the arrow that is black turned gray getting a little more transparent.

To hide the button when it has an attribute disabled just put this CSS on your site:

.go[disabled] {
    visibility: hidden;
}

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

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

  • the idea of the buttons worked, I just didn’t understand why to continue inside that gray box there.

  • "..to continue inside.." I don’t get it, do you? ?

  • Yes... Elsewhere it works the drawing blz, but when I put in place, the arrow remains the same, but only changes the color, like the color I chose from the arrow.

  • You have to improve your question, because it seemed to me that you want to improve the style of the buttons. input is disabled disabled attribute, by default CSS3 in browsers, the input, becomes more "transparent", so the arrow that is black turned gray getting a little more transparent. To hide the element, just put this in your next CSS: .go[disabled] { visibility: hidden } NOTE: I improved the answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.