tick to be displayed button on button and to reduce its opacity when it's clicked

Question

I would like for a tick to be shown and its opacity reduced on a button once it is clicked.

#btnTicketType{
    margin-bottom:2%;
    margin-top:10%;
    width:95%;
    height:15em;
    font-size:1.5em;
}

#seatnumber{
    display:block; 
    width:100%; 
    text-align:center;
    font-size:1em;
}

#rectangle{
    height:100%;
    width:100%;
    overflow:auto;
    outline-color:black;
    outline-style:solid;
}

<div id="rectangle">
        <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 1</button>
            <small id="seatnumber">Text 1</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 2</button>
            <small id="seatnumber">Text 2</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 3</button>
            <small id="seatnumber">Text 3</small>
        </div>
}
</div>
<br />

It would be nice if also to reduce the opacity of the button once the tick shows so that the tick would be more prominent for the user.

You should use an Element, besides a `` or ``, as buttons don't support `.innerHTML`. Either that or use `position:absolute;` on the button and the tick in and have the parent of the both, `position:relative;`. — StackSlave, Nov 06 '17 at 02:19
Possible duplicate of [Change Button color onClick](https://stackoverflow.com/questions/26937424/change-button-color-onclick) — Chirag Jain, Nov 06 '17 at 02:21
@PHPglue What does the question have to do with `innerHTML()`? A ` — Kirk Beard, Nov 06 '17 at 02:21
You want a tick in the button. You cannot put anything in a button. — StackSlave, Nov 06 '17 at 02:22
hmm, thanks chiru. I'll look into the link and see what i can do — shikiko, Nov 06 '17 at 02:23
@PHPglue `` because a [buttons can have content](https://css-tricks.com/use-button-element/#article-header-id-1). So, based on that, you can add an `` tag inside a `
@shikiko I've posted an answer showing how to add elements to a ``. — Kirk Beard, Nov 06 '17 at 03:39

Kirk Beard · Accepted Answer · 2017-11-06T04:09:48.173

I've created a HTML/CSS/JavaScript snippet that does the following things:

Includes a 'tick' on each button; and
Once a button is clicked, it fades out

You can see a working example on JSFiddle.

Your question is a tad confusing, as the question title and body say different things:

Display Tick on button and reduce opacity when its clicked

Versus:

I would like for a tick to be shown on a button once it is clicked.

The CSS for this snippet can be easily modified to achieve either result.

Working Snippet

$( '.btnTicketType' ).click(function() {
  $(this).addClass('clicked-button');
});

.btnTicketType {
    margin-bottom: 2%;
    margin-top: 10%;
    width: 95%;
    height: 15em;
    font-size: 1.5em;
    transition: all 1s;
}

.seatnumber{
    display: block; 
    text-align: center;
    font-size: 1em;
}

#rectangle{
    overflow: auto;
    outline-color: black;
    outline-style: solid;
}

.clicked-button {
    opacity: .1;
}

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle">
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 1
        </button>
        <small class="seatnumber">Text 1</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 2
        </button>
        <small class="seatnumber">Text 2</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 3
        </button>
        <small class="seatnumber">Text 3</small>
    </div>
</div>

Additional Notes

A <button> element is semantically valid:

The HTML <button> element represents a clickable button.
A <button> element can contain other HTML elements if required:

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.
Based on the above definitions, I've used Font Awesome to add the check icon to your buttons.
Your HTML incorrectly reused ID attributes. An id="btnTicketType" attribute must be unique, and cannot be reused in valid HTML. If you need to style multiple elements, it's better to use a class="btnTicketType" instead. I replaced the repeated ID attributes with classes instead for the HTML in my snippet.
If you're using the <button> element in a <form>, the value="" attribute will be submitted with the form. From the MDN documentation:

value
The initial value of the button. It defines the value associated with the button which is submitted with the form data. This value is passed to the server in params when the form is submitted.

thanks for providing so much informative sources for me to refer too. I would just like to ask regarding the Jquery statement that calls the CSS to reduce its opacity to .1. Is there a way I can re-click and it will revert the opacity back to normal ? — shikiko, Nov 06 '17 at 04:53
@shikiko You can use [`toggleClass`](http://api.jquery.com/toggleclass/) instead of `addClass()`. You can learn about the differences here: https://stackoverflow.com/questions/8342396/difference-between-toggleclass-and-addclass — Kirk Beard, Nov 06 '17 at 04:56
thank you so much for your help. I really appreciate it. I think i can manage it now somewhat — shikiko, Nov 06 '17 at 05:02

tick to be displayed button on button and to reduce its opacity when it's clicked

1 Answers1

Working Snippet

Additional Notes