A uuCanvas.Layer gradation button example

<div id="view1"></div>
<div id="view2"></div>

window.onload = function() {
  var layer1 = new uuCanvas.Layer(document.getElementById("view1"), 120, 60);
  var layer2 = new uuCanvas.Layer(document.getElementById("view2"), 120, 60);
  layer1.addCanvas("a").show();
  layer2.addCanvas("a").show();
  uuCanvas.ready(function() {
    // --- button1 ---
    var extend = { w: 120, h: 60 };
    var img = document.images[0];
    var caption = -1;
    var rgba1 = { r: 0, g: 218, b: 218, a: 1 };
    var rgba2 = { r: 218, g: 0, b: 0, a: 1 };
    var r = 12, rdelta = 1;

    layer1.metaboGlossy(0, 0, "GGRAY", extend);
    uu.bind(layer1.view, "mouseover", function(evt) { uu.stop(evt); caption = 0;  });
    uu.bind(layer1.view, "mouseout",  function(evt) { uu.stop(evt); caption = 20; });
    uu.bind(layer1.view, "mousedown", function(evt) { uu.stop(evt); caption = 40; });
    uu.bind(layer1.view, "mouseup",   function(evt) { uu.stop(evt); caption = 60; });

    setInterval(function() {
      rgba1 = uuCanvas.Color.arrange(rgba1, 1, 0, 0);
      rgba2 = uuCanvas.Color.arrange(rgba2, -1, 0, 0);
      extend = uu.mix(extend, { gcolor1: uuCanvas.Color.hex(rgba1),
                                gcolor2: uuCanvas.Color.hex(rgba2),
                                r: r });
      layer1.clear().metaboGlossy(0, 0, "", extend);
      if (caption >= 0) {
        layer1.image(img, 0, caption, 120, 20, 0, 20, 120, 20);
      }
      r += rdelta;
      if (r < 12) {
        rdelta = 1;
        r = 12;
      } else if (r > 28) {
        rdelta = -1;
        r = 28;
      }
    }, 80);

    // --- button2 ---
    var extend2 = { w: 120, h: 60 };

    layer2.metaboGlossy(0, 0, "GGRAY", extend2);

    uu.bind(layer2.view, "mouseover", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 0, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseout", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGRAY", extend2).
             image(img, 0, 20, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mousedown", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGOLD", extend2).
             image(img, 0, 40, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseup", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 60, 120, 20, 0, 20, 120, 20);
    });
    layer2.show();
  });
};
      

Source image