JSFiddle - React, Tailwind, and code Playground

by roman_khrystynych

HTML

<input type="submit" id="login-submit" value="LOGIN" />
<img id="loading-gif" />

CSS

input[type=button], input[type=submit], a.a-button, button.a-button{
    display: block;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    border: none;
    cursor: pointer;
    padding: 3px 0px 3px 0px;
    text-align: center;
    width: 120px;
    margin: 1px;
    background-image: url("http://s9.postimg.org/692z84qbf/landing_button_red.png");
    background-size: 100% 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    height: 39px;
    color: #fff;
    float: left;
    -webkit-box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}

    input[type=button]:disabled , input[type=submit]:disabled , a.a-button:disabled  {
        background-image: url("http://s24.postimg.org/c4j4emipd/button_darkred.png");
        cursor: default;
    }
    input[type=button]:hover , input[type=submit]:hover , a.a-button:hover  {
        background-image: url("http://s24.postimg.org/c4j4emipd/button_darkred.png");
    }

img#loading-gif{
    background-image: url("http://s17.postimg.org/9uz1yyu3f/Peak_Dot_Loading_gif1.gif");
    display: none;
    width: 13px;
    height: 5px;
    position: absolute;
    margin-top: 21px;
    margin-left: -19px;
}

JavaScript

$('#login-submit').click(function(){
    $('#login-submit').attr({ disabled: true, value: 'LOGGING IN' });
    $('img#loading-gif').show();
    //Ajax call
    //After Ajax call $('#login-submit').attr({ disabled: false, value: 'LOG IN' });
});