Add tinting to the border in ui_texture_slice example (#11901)

# Objective

This is just a cool property of the full-white border texture we added
for this example that I think would be nice to show off.

## Solution

Add a tint to the border on hover / click.


![screenshot-100](https://github.com/bevyengine/bevy/assets/200550/a436c383-2cda-4578-999d-b89d244c993d)

examples/ui/ui_texture_slice.rs

@@ -14,20 +14,26 @@ fn main() {
 }
 
 fn button_system(
-    interaction_query: Query<(&Interaction, &Children), (Changed<Interaction>, With<Button>)>,
+    mut interaction_query: Query<
+        (&Interaction, &Children, &mut BackgroundColor),
+        (Changed<Interaction>, With<Button>),
+    >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, children) in &interaction_query {
+    for (interaction, children, mut color) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Pressed => {
                 text.sections[0].value = "Press".to_string();
+                color.0 = LegacyColor::GOLD;
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
+                color.0 = LegacyColor::ORANGE;
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
+                color.0 = LegacyColor::WHITE;
             }
         }
     }
@@ -71,6 +77,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 ..default()
                             },
                             image: image.clone().into(),
+                            // When combined with an image, this tints the image.
+                            background_color: LegacyColor::WHITE.into(),
                             ..default()
                         },
                         ImageScaleMode::Sliced(slicer.clone()),