How can I implement random button color generator in Html5, JavaScript, Css, Sass
<p>I wanted to know how can I generate a random button color, and the
  <em>-webkit-box-shadow
  -moz-box-shadow
  box-shadow</em> random color, I have this code so far:</p>

<pre><code>    &lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Hello World&lt;/title&gt;

  &lt;style&gt;
      body { background-image: url(city.jpg) }

      a {
          position: relative;
          margin: 100px auto;

          width: 160px;  
          height: 160px;

          background-color: rgba(7,148,255,1);

          font-family: 'Sans Serif';
          font-weight: 700;
          font-size: 3em;
          text-align: center;
          text-decoration: none;
          color: rgba(255,255,255,1);

          display: block;

          padding: 4px;

          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px;

#THE RANDOM CODE COLOR WILL BE APPLIED FROM HERE
              -webkit-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
              -moz-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
              box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
#TO HERE

          -webkit-transition: all .1s ease;
          -moz-transition: all .1s ease;
          -ms-transition: all .1s ease;
          -o-transition: all .1s ease;
          transition: all .1s ease;
}

a:active {

#AND FROM HERE
        -webkit-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
        -moz-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
        box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
#TO HERE
        position: relative;
        top: 6px;
} 

&lt;/style&gt;

  &lt;script&gt;
    // We really want to disable
    window.open    = function() {};
    window.alert   = function() {};
    window.print   = function() {};
    window.prompt  = function() {};
    window.confirm = function() {};
  &lt;/script&gt;

  &lt;script&gt;
  // #killanim is only being used in lab full view, maybe we could
  // use it everywhere :D
//if (window !== window.top &amp;&amp; window.top.__stop_animations !== false) {
if (window !== window.top &amp;&amp; location.hash !== '#dontkillanim') {
  window.is_webkit = /(webkit)[ \/]([\w.]+)/.exec(window.navigator.userAgent.toLowerCase())

  window.max_timer = window.is_webkit ? 2000 : 20

  // Let's try to prevent user's from OOM'ing esp. in FX and Op.
  // First, we need to stop CSS Animations, after say 5s ?
  //
  // Ok, so i tried 5s, but there are some problems. Firstly, Firefox
  // and opera behave same. little improvement only. So making it 3s now.
  //
  // Tutorial: https://developer.mozilla.org/en/CSS/CSS_animations
  // Help: http://www.sitepoint.com/css3-animation-javascript-event-handlers

  var pauseCSSAnimations = function() {

    var stopCSSAnimations = function() {
      // Get the Body Element
      var body = document.getElementsByTagName('body')[0];

      // We'll setup animationstart and animationiteration
      // events only. No need for animationend, cuz the
      // animation might be 30minutes long. animationiteration
      // cuz the animation might be .000002ms long.

      // addEventListener is perfectly supported in IE9.
      // and we don't care about IE8 and below. Let those
      // browsers die in a fire!

      body.addEventListener('webkitAnimationStart', stopAnimation, false);
      body.addEventListener('webkitAnimationIteration', stopAnimation, false);
      body.addEventListener('animationstart', stopAnimation, false);
      body.addEventListener('animationiteration', stopAnimation, false);
    };

    // e is the event object bro ;)
    var stopAnimation = function(e) {
      // e.srcElement? lulz...
      var target_el = e.target;
      var e_type = e.type.toLowerCase();

      if (e_type.indexOf('animationstart') !== -1 || e_type.indexOf('animationiteration') !== -1) {
        // LOL, we need to stop the animation now!
        // setInterval? lulz...

        setTimeout(false, function() {

          if (target_el.style.webkitAnimationPlayState !== 'paused')
            target_el.style.webkitAnimationPlayState = 'paused';

          if (target_el.style.MozAnimationPlayState !== 'paused')
            target_el.style.MozAnimationPlayState = 'paused';

          if (target_el.style.animationPlayState !== 'paused')
            target_el.style.animationPlayState = 'paused';

        }, window.max_timer);
      }
    }

    stopCSSAnimations();

  };

  // Next we need to pause/stop JS Animations

  var pauseJSAnimations = function() {

    // We need to override setInterval, setTimeout
    // in such a way, that all the calls register their
    // ids in an array and we can clear all the ids
    // after a given time.
    //
    // Don't trust me ? Lern2Google:
    // http://stackoverflow.com/a/11374151/1437328
    // http://stackoverflow.com/a/8524313/1437328
    // http://stackoverflow.com/a/8769620/1437328
    //
    // 3rd one is pretty much the code you need!
    //
    // Thank you for building your trust in me now :D

    window.setInterval = (function(oldSetInterval) {
      var registered = [];

      var f = function() {
        var id;
        // .. this!
        var $this = this;
        // setInterval accepts n no. of args
        var args = arguments;
        // What if someone used the awesome Function.bind() ?
        // I am sure we want the awesome apply() then ;)

        // this is my awesome brain usage. if first val is nonsense,
        // then don't register, heh.
        if (typeof args[0] !== 'function' &amp;&amp; args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);

          id = oldSetInterval.apply($this, args)
        }
        else {
          id = oldSetInterval.apply($this, args);
          registered.push(id);
        }

        //console.log(registered);
        // Need to return the Interval ID
        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearInterval(r);
        }
      };

      return f;
    })(window.setInterval);

    window.setTimeout = (function(oldSetTimeout) {
      var registered = [];

      var f = function() {
        var id;
        // .. this!
        var $this = this;
        // setInterval accepts n no. of args
        var args = arguments;
        // What if someone used the awesome Function.bind?
        // I am sure we want the awesome apply then ;)

        // this is my awesome brain usage. if first val is nonsense,
        // then don't register, heh.
        if (typeof args[0] !== 'function' &amp;&amp; args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);

          id = oldSetTimeout.apply($this, args)
        }
        else {
          //console.log('lolzzzzz');
          id = oldSetTimeout.apply($this, args);
          registered.push(id);
        }

        //console.log(registered);
        // Need to return the Timeout ID
        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearTimeout(r);
        }
      };

      return f;
    })(window.setTimeout);

    setTimeout(false, function() {
      setTimeout.clearAll();
      setInterval.clearAll();
    }, window.max_timer);


    // Time to Cancel rAF's Bro :)
    // You know things are harder when people are actually
    // using shims for rAF :/ So we need to test for vendors!

    window.__requestAnimFrame = window.requestAnimationFrame || undefined;
    window.__cancelAnimFrame = window.cancelAnimationFrame || undefined;
    window.__vendors = ['webkit', 'moz', 'ms', 'o'];
    window.__registered_rafs = [];

    // I can't think of a good way to cancel rAF's
    // So maybe lets use something similar to our other canceller's

    window.__requestFrame = function(cb) {
      if (!window.__requestAnimFrame) return;

      var req_id = window.__requestAnimFrame(cb);
      __registered_rafs.push(req_id);

      return req_id;
    };

    // Determine the proper VendorPrefixedFunctionName
    if (!window.__requestAnimFrame) {
      for (var x = 0; x &lt; window.__vendors.length; x++) {
          if (!window.__requestAnimFrame) {
            window.__requestAnimFrame = window[window.__vendors[x]+'RequestAnimationFrame'];
            window[window.__vendors[x]+'RequestAnimationFrame'] = __requestFrame;
          }

          if(!window.__cancelAnimFrame) {
            // I came across webkitCancelAnimationFrame and webkitCancelRequestAnimationFrame
            // No idea about the difference, so maybe lets ||'fy it

            window.__cancelAnimFrame = window[window.__vendors[x]+'CancelAnimationFrame'] ||
                                        window[window.__vendors[x]+'CancelRequestAnimationFrame'];
          }
      }
    }

    // We have our proper vendor prefixed raf objects now :)
    // So let's go mad!!!
    // Let's Cancel our rAF's
    setTimeout(false, function() {
      if (!window.__requestAnimFrame) return;

      var r;
      while (r = window.__registered_rafs.pop()) {
        window.__cancelAnimFrame(r);
      }
    }, window.max_timer);

  };

  // Had to place outside pauseAnimations to work properly
  // else it was getting called afterwards code setTimeout/Interval executed
  if (window !== window.top)
    pauseJSAnimations();

  var __pauseAnimations = function() {
    if (window !== window.top)
      pauseCSSAnimations();
  };
}

else {
  __pauseAnimations = function() {};
}

  &lt;/script&gt;
&lt;/head&gt;

&lt;body onload="__pauseAnimations();"&gt;

&lt;a href="javascript:void(0);"&gt;!&lt;/a&gt;
&lt;script&gt;
//For button
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And I want to imlement this SASS code to make the -webkit-box-shadow -moz-box-shadow box-shadow random color:</p>

<pre><code>    $shadows:1000;

@function randomBoxShadow() {

    $shadow: '0' +'px '+ '0' +'px '+ '9' +'px rgb('+random(255)+','+random(255)+','+random(255)+')';
    @return unquote($shadow);

}

.shadwo {
    $box-shadow:0 0 10px 0 #000;
    @for $i from 2 through $shadows {
        $box-shadow: $box-shadow+','+ randomBoxShadow();
    }
    box-shadow:unquote($box-shadow);
}
</code></pre>