Changing the position of Buttons

SKC

I've added the Excel and Colvis buttons to the top-left corner of the datatable as follows :

Here's my script for the same :

$('#searchResult').DataTable(
     {

         "dom": '<"top"lB>rt<"bottom"ip>',
         buttons: [
         {
             extend: 'excel',
             exportOptions:
             {
                 columns: ':visible'
             }
         },
        'colvis']
}

I have 2 requirements :

1) I've been trying to move the buttons to the exteme right-side of the table(from their current position). I used the following css but was unsuccessful :

#searchResult.dt-buttons {

  float: right;

}

and this too :

#searchResult.btn{float:right;}

Can anyone tell how can I move the Excel and ColVis button from their current position (which is left) to the exteme right?

2) Can I replace the buttons with icons (to improve the UI) and retain the same functionality.
For e.g) I insert an icon for Excel instead of a button..
How can I assign an icon the capabilities of the Default Excel button??

Thank you in advance.

SKC

Ok. Was able to solve my first issue with the following code :

.dataTables_wrapper .dt-buttons {
  float:right; 
}

But unable to solve ,y second problem.

I more question : How to cahnge the colour of these buttons??
(Because inserting "background-color" inside the above css won't work as it's a wrapper)