Change background color of square button

[pegetive]

I'm using the square button of Fitbit in my app on Ionic and when the button is clicked, depending on the condition, the background color should be changed to either red or green but when I use the following instruction, only the border of the button changes color:

 myButton.style.fill = 'red'

How can I change the color of the whole area? thanks

[JonFitbit · Accepted solution]

The button has 2 states, the `off` state has an image which just provides the button border and the fill color applies to the border. The `on` state switches the image and the fill applies to the whole image. To override this behaviour you'll need to replace that initial image as follows:

<svg>
  <use id="mybutton" href="#square-button" y="5" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
    <set href="#stroke" attributeName="href" to="/mnt/sysassets/widgets/images/square_button/btn_square_fill_p.9.png" />
    <set href="#stroke" attributeName="fill" to="fb-green" />
  </use>
</svg>

[sandiperkey]

Is there a way to change background color of Alta so I can see the display in sunlight?