JSFiddle - React, Tailwind, and code Playground

by bmgonzal

HTML

<script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
<p>Not using any CSS hover to add the red border.. </p>
<button id='awesome'>Awesome Button</button>

CSS

body{ padding: 10px }

button{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #050505;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #ebebeb 50%,
        #dbdbdb 50%,
        #b5b5b5);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#ffffff),
        color-stop(0.50, #ebebeb),
        color-stop(0.50, #dbdbdb),
        to(#b5b5b5));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #949494;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,1);
}

.active{ border: 3px solid red }
.clicked{ background: #eee }

JavaScript

$(document).ready(function(){

    var t = { start: 'touchstart',                            
              move:  'touchmove',
              stop:  'touchend' }
        
    var m = { start: 'mousedown',                            
              move:  'mousemove',
              stop:  'mouseup' }
        
    // Are we on a touch device?
    var e     = Modernizr.touch ? t : m;
    var $awesome = $('#awesome');
    var within = false;
    var clicked = false;
     
     // Give our button some styling when we move inside button 
     $awesome.bind( e.start, function(ev){
        $awesome.addClass('active clicked');
        clicked = true;
     });  
     
     // Watch our movements, and style the button when we move within the button
     $(window).bind( e.move, function(ev){
        var t = Modernizr.touch ? ev.originalEvent.touches[0] : ev;
        within = isWithinButton( '#awesome', {x: t.pageX, y: t.pageY});
        if (within)  $awesome.addClass( clicked ? 'active clicked' : 'active' );
        if (!within) $awesome.removeClass('active clicked'); 
     });  
    
     // If we're within the button, fire our event
     $(window).bind( e.stop, function(ev){
         $awesome.removeClass('active clicked');
         clicked = false;
         if (within)  alert('Clicked!!!')
     });    

});


function isWithinButton(selector, coords){
    var $el =      $(selector);
    var top =      $el.offset().top;
    var bottom =   top + $el.outerHeight();
    var left =     $el.offset().left;
    var right =    left + $el.outerWidth();
    
    return (coords.x > left) && (coords.x < right) &&
           (coords.y > top)  && (coords.y < bottom);
    
}