just another inlet to tributary

inlet.js

//Creating a Button
var callback = function(){};
var button7 = createButton('Undo', callback).attr('transform','translate('+[707,9]+')')    




var defs =  d3.select('svg').append('defs')
addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')  
addGradient("#FFF368", "#418041", 46, 'g3203')  
addGradient("#0085FF", "#1073A2", 46, 'g3204')  



function addGradient(color1,color2,stopPX,id){
  
  var gradient = defs.append('linearGradient')
      .attr('id',id)
      .attr('gradientUnits','userSpaceOnUse')
      .attr('x1','0%')
      .attr('x2','0%')
      .attr('y1','0%')
      .attr('y2',stopPX)    
    gradient.append('stop').attr('stop-color',color1).attr('offset','0')
    gradient.append('stop').attr('stop-color',color2).attr('offset','1') 
}

function createButton(name,callback){
    
      var buttonGroup = d3.select('svg').append('g')
      .on('click', function(d,i){
              callback(this)
            })
            .on('mousedown',function(){
               d3.select(this).select('#buttonBG')
               .attr('fill','url(#g3201)')
                   .attr('stroke-width',3)
                   .attr('stroke','url(#g3202)')  
            })  
      .on('mouseover',function(){
                d3.select(this).select('#buttonBG')
          .attr('fill','url(#g3203)')
                    .attr('stroke-width',3)  
                    .attr('stroke','url(#g3204)')  
            })
            .on('mouseout',function(){
                d3.select(this).select('#buttonBG')
                  .attr('fill','url(#g3203)')
                  .attr('stroke','url(#g3202)')  
                   .attr('stroke-width',3)  
            })
            .on('mouseup',function(){
                d3.select(this).select('#buttonBG')
                  .attr('fill','url(#g3203)')
                  .attr('stroke','url(#g3202)')  
                   .attr('stroke-width',3)  
            })
            
        var rect = buttonGroup.append('rect')
            .attr('width',122)
            .attr('height',45)
            .attr('fill',"#922F2F")
            .attr('rx',10)
            .attr('ry',10)
            .attr('id','buttonBG')
            .attr('height',45)
            .attr('fill','url(#g3203)')
            .attr('stroke','url(#g3202)')
            .attr('stroke-width',3)

          
            
         var text = buttonGroup.append('text')
              .attr('id','pathWay')
            .attr('font-size',10)
              .attr('fill',"#FFFFFF")
              .style('text-shadow','1px 1px 2px'+"#000000")
              .text(name)
              .attr('transform','translate('+[10,rect.attr('width')/4.5]+')')  
         var textLength =  text.node().getBBox().width;
        rect.attr('width',textLength+20)
    return buttonGroup;
}