How to change wallet-adapter-react-ui WalletBultiButton styling

Question

This is how the current multi-button looks like on my page

however I want to override not just the styling, but also change the text and or the make the button an image. Something like this:

Answer 1

Step 1: Create a wallet.css file copy past the following snippet in the CSS file:

 .wallet-button{
    border: 2px solid black !important;
    color: black !important;
 }
  
 .wallet-button:hover {
   border: 2px solid grey !important;
   color: white !important;
 }

Step 2: Import CSS file in the component (make sure path to file is correct):

import "./wallet.css";

Step 3: Add class in WalletMultiButton component:

<WalletMultiButton  
   className="wallet-button"  
/>

Answer 2

you can find a good example of wallet customizing here