Changing bottom button color

I have two rows of buttons, I was able to change the className for the top row but the bottom initialization shows up with only the font color changed even though I used the same className as in the top row. How do I override the normal button appearance for the bottom row?

Also, how does one go about putting spaces between the top row buttons? The CSS for margin-right or anything isn't working at all.

        new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                
                text: "Button 2",
                action: function ( e, dt, node, conf ) {
                    alert( "Button 2 clicked on" );
                },
                

            },

        ]
        
    } );