# When you tap a button it puts a white tint on it - how can I toggle that off?

**URL:** <https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463>\
**Category:** Questions about Thunkable X\
**Created:** [August 6, 2020, 5:22pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463 "2020-08-06T17:22:15Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 6, 2020, 5:22pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/1 "2020-08-06T17:22:15Z")

</div>

When you tap a button it puts a white tint on it - how can I toggle that off?

It’s white washing the image of my button and I’d like to turn it off.

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [August 6, 2020, 5:25pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/2 "2020-08-06T17:25:12Z")

</div>

Hey @exploriverse.com,

Are you referring to touch feedback on a button? A recent Thunkable update allows for lots of new components to detect clicks. Images are one of these supported components.

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/9/894319c3ce750825d424cce4c4d8dcc02d7aeae2.png)

To my knowledge, this should not show any touch feedback.

---

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 7, 2020, 2:16pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/3 "2020-08-07T14:16:11Z")

</div>

@eoinparkinson this is not the same as there is no access to click-hold & click-up, but this will not put an opacity on the item.

It seems to be an opacity change built into the button component. Please give access to Opacity so I can set it to 100% on touch down OR make it a setting of the button. Please.

My desired result is for this piano key button interface. Visually all the keys look up. Let’s say you tap the purple key, on tap it displays an image of it looking like its pressed down. I don’t want it to get transparent.

 ![Screen Shot 2020-08-07 at 7.12.49 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/7/f7af4b70a28916ae8e39d20c5b6d4b19167a3208.png)

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 8, 2020, 9:31am UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/4 "2020-08-08T09:31:08Z")

</div>

Check it (Turn the button 180 degrees and turn off the display of its backfaceVisibility on Advanced tab).

[https://x.thunkable.com/projects/5f2a9c927951ff39c2fd0350/project/properties/designer/](https://x.thunkable.com/projects/5f2a9c927951ff39c2fd0350/project/properties/designer/)

---

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 8, 2020, 11:03pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/5 "2020-08-08T23:03:45Z")

</div>

I’m not going to turn the button 180 degrees.

What does backfaceVisibility do?

I can’t find anywhere in your project how you make the tap state orange?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 9, 2020, 11:00am UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/6 "2020-08-09T11:00:00Z")

</div>

Turn the button 180 degrees and turn off the display of its backfaceVisibility on Advanced tab - this is an instruction of what to do on using the properties on the Advanced tab. In my example, this is already done.

The Advanced tab has properties that you can use to do this. Write to us if you have carefully reviewed all the properties, but could not find them.

---

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 9, 2020, 4:08pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/7 "2020-08-09T16:08:37Z")

</div>

I appreciate your response. I have played with your example app and you would know best what thunkable is capable of.

But this setting does not work for how I’m using the button. To be clear I’m using images in my button to display a “Touch down” state to make the button look like its being pressed down.

I can not afford to rotate the button as it will look like its upside down.

The setting “backfaceVisibility” makes the image disappear, so that is not an option.

Perhaps there is another way to do this? At this point I exhausted the options and just have to accept this is how button components work in thunkable and its a hard coded attribute I can’t change.

See this image of how i’m doing the visual states and what the result is in the LIVE app.

 ![tap](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/c/acd7eaaf5c07aecb8b1309869936c6fcbcaabeda.png)

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 9, 2020, 6:13pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/8 "2020-08-09T18:13:03Z")

</div>

I see that you don’t understand what needs to be done. The transparent button is only used for generating events, and the images themselves must change on the element below it - the Column. Now do you understand what you need to do? If you don’t understand, I can show an example in your public app if you give a link to it.

---

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 9, 2020, 7:58pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/9 "2020-08-09T19:58:41Z")

</div>

Yea you’re the best, my mind was blown a bit. 🙂

I understand now, the button contains the image for up state. The column contains the image for the down state. Using the “backfaceVisibility” = hidden on tap. Though on tap it isnt hidden completely, I can still see it a bit.

Notice you can’t press two buttons at once, is this solve-able?

[https://x.thunkable.com/projects/5f305229f6cd2f6d46d1c6ca/42e0c91d-44e5-4293-b545-2d104c5e2700/designer](https://x.thunkable.com/projects/5f305229f6cd2f6d46d1c6ca/42e0c91d-44e5-4293-b545-2d104c5e2700/designer)

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 10, 2020, 7:54am UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/10 "2020-08-10T07:54:00Z")

</div>

It was necessary to change the image to Column when pressing and releasing the button ))

To simultaneously click on buttons, you need to use a component that allows you to process two or more clicks. This Is Canvas. In this case, you need to use sprites for the keys. When you click on the sprite, a sound appears and the image of the key changes. If sprites can’t handle events as buttons at the same time, then you will have to do everything through the canvas and detect clicks on the canvas.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 10, 2020, 10:24am UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/11 "2020-08-10T10:24:10Z")

</div>

I spent a lot of time, but I couldn’t solve your problem on Android. I think it is not solved due to Thunkable X’s performance limitations.

You can either press several coavish simultaneously without changing the key pattern, or press one key at a time with changing the key pattern. You can’t use Canvas to simultaneously press several keys and display them in the pressed state.

[https://x.thunkable.com/projects/5f30fa8ecc615c9515de1f8b/project/properties/designer/](https://x.thunkable.com/projects/5f30fa8ecc615c9515de1f8b/project/properties/designer/)

I’m not sure that this can solve the problem, but you can try to reduce the size of all the files as much as possible.

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [August 10, 2020, 11:30am UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/12 "2020-08-10T11:30:38Z")

</div>

I wonder could you put an invisible button set to fill height and width in a column, and use the column to change images. This button would be set to invisible. Haven’t tried this though.

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [August 10, 2020, 1:55pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/14 "2020-08-10T13:55:58Z")

</div>

@exploriverse.com here is a quick example with invisible button on a column. This shows no touch feedback and reacts when you touch down/up. Is this what you were looking for? [https://x.thunkable.com/copy/79b6f7a91fa4efe7fc93c7af692eb5fc](https://x.thunkable.com/copy/79b6f7a91fa4efe7fc93c7af692eb5fc)

---

<div class="post-metadata">

**Author:** ![exploriverse.com](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/exploriverse.com/32/77609_2.png) [@exploriverse.com](https://community.thunkable.com/u/exploriverse.com)\
**Post date:** [August 10, 2020, 1:56pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/15 "2020-08-10T13:56:23Z")

</div>

@actech Thank you for taking the time. Your blocks are impressive and although canvas seems like a lot of work to get it to function closer what I have in mind. It’s something more advanced that I’d like to learn later.

What I learned here that is a game-changer is the approach of loading image in the column and using lotti/image/button component to load on top as if its on a higher layer. This gives a professional look of animated popups, messages.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:26pm UTC](https://community.thunkable.com/t/when-you-tap-a-button-it-puts-a-white-tint-on-it-how-can-i-toggle-that-off/724463/16 "2024-11-08T12:26:42Z")

</div>


