Change color of a button

How-to Discussions
1

Hi. How do I change the color of a default button?

Tried the “backround” property, didnt work.

Thanks for all answers :slight_smile:

2

Hi!

Since the button you get from the Basic theme is using resources to define its colors, you have to “override” these colors by supplying them to the button with the correct keys.

Normally you should just prefer creating you buttons “from scratch” since this will give you all the freedom you need and is only slightly more work than customizing the basic button.

Anyway, here is how you’d do it:

<Button Text="Test button" Alignment="Center">
    <float4 ux:Key="C600" ux:Value="#f00" />
    <float4 ux:Key="C700" ux:Value="#f8a" />
</Button>

Here is how i would do it though:

<Panel ux:Class="MyButton" BackgroundColor="#f00" TextColor="#fff" Text="Button" Padding="10">
    <float4 ux:Property="BackgroundColor" />
    <float4 ux:Property="TextColor" />
    <string ux:Property="Text" />

    <Text Value="{Property this.Text}" TextColor="{Property this.TextColor}"/>
    <Rectangle Layer="Background" Color="{Property this.BackgroundColor}" CornerRadius="5"/>
</Panel>

This gets you started creating your own button by making a new class. You can then create instances of this button like so:

<MyButton Text="My button" Alignment="Center"/>

Check out the following learn sections for more info: https://www.fusetools.com/learn/fuse#ux-class https://www.fusetools.com/learn/fuse#ux-property

I hope this helps :slight_smile:

3

Hi,

It works perfect for me, but I would like to know, How can I change the color while pressing the button, please.

Thanks

4

It’s covered in our documentation, I suggest you give that a read. It’ll also teach you the basic concepts that you’ll need when working in Fuse. There’s also a video tutorial on that subject btw.

5

@candiaur

inside the class add

<Panel ux:Class="MyButton" BackgroundColor="#f00" TextColor="#fff" Text="Button" Padding="10">
    <float4 ux:Property="BackgroundColor" />
    <float4 ux:Property="TextColor" />
    <string ux:Property="Text" />

    <Text Value="{Property this.Text}" TextColor="{Property this.TextColor}"/>
    <Rectangle Name="rect" Layer="Background" Color="{Property this.BackgroundColor}" CornerRadius="5"/>
    <WhilePressed>
        <Change Target="rect.Color" Value="#f00">
    </WhilePressed>
</Panel>

Notice how I gave the Rectangle a name of rect to target it

6

Thank you so much for the help, I found the tag “Pressing” and I thought that was the answer but I couldn`t make it work.

Thank you both!!