Images as buttons with GUI skins

I’m having trouble working out how to make a custom button style in Unity 5. I have two different image files of (eg) a tree, in this manner:

  1. Tree on dark background
  2. Tree on light background

I want to create a custom button that normally displays #1 but displays #2 when hovered over. A GUI skin is probably best for this but I have about five pairs of files and I’m not sure if multiple GUI skins would be the best way to go. The buttons need to be displayed concurrently - here’s an example:

Any way I could go about this? I’m a Unity newbie so any help would be appreciated.

The Button component supports this already. You just need to select Sprite Swap as your button’s Transition mode, and drag and drop the two sprites you want to use on Target Graphic (inactive/normal) and Hilighted (hover).