An example of using the jQuery Double Rainbow plugin.

jQuery-Double-Rainbow-Plugin-default-configuration-options.js

$.fn.doubleRainbow.defaults = {
    startDistance: 500,
    steps: 20,
    startBgColor: '#333333',
    endBgColor: '#999999',
    startColor: '#CCCCCC',
    endColor: '#FFFFFF'
};

jQuery-Double-Rainbow-Plugin-example.html

<header>
  <div class="container">
    <h1>My Amazing Hero Header</h1>
    <button id="exampleButton">My Call To Action. Tap Me!</button>
  </div>
</header>

<script type="text/javascript">
$('#exampleButton').doubleRainbow({
  steps: 20,
  startColor: '#FFF',
  startBgColor: '#222',
  endColor: '#FFF',
  endBgColor: '#900'
});
</script>