JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div class="button" id="button.one"> Button </div>
<br />
<div class="button" id="button.two"> Disable the button above </div>

CSS

body{
background-color:#45719B;
}

.button{
    font-variant: small-caps;
    font-family:'Trebuchet MS';
 border:1px solid white;
 background-color: blue;
    width: auto;
    height:2em;
    display:inline-block;
    line-height:2;
    padding:0.3em;
    color:white;
    text-shadow:0 1px 1px #253E5C;
    box-shadow:3px 2px 1px #253e5c;
    margin: 1em;
}

.button.disabled{
    border-color:black;
    background-color:gray;
}

JavaScript

$('button.one').addEvent('click', function(){
    if(this.hasClass('disabled'))return;    
    alert('You just clicked me, guy!');
});

$('button.two').addEvent('click', function(){
    var button = $('button.one');

    if(button.hasClass('disabled')){
       button.tween('opacity', 0, 1);
       button.removeClass('disabled');
       this.set('text', 'Disable the button above');
    }else{
       button.addClass('disabled'); 
       button.tween('opacity', 1, 0);
        this.set('text', 'Enable the button above');
    }
       
});