Custom Button Out of space

Hi there,
I was trying to add some buttons over a picture in a canvas. What I wanted was these buttons to have specific appearance, to match the picture, so using photoshop, paint, etc I created my custom shapes.
The setup is that:
I used as "Source Image" for the button my shapes (gifs).
Then I placed the button at the position I wanted,
I scale it at the size I wanted
On text I left it empty (no text)
Add my actions and ready!

Note that I have not any "layout component"

The problem is that when I push play, the buttons are appeared some pixels (30+) above their original position.

Note that nowhere in my scripts do I use transform actions that might conflict. They are just buttons to methods (AudioSource.play(), etc)

Has anyone any idea what might going wrong?

 

One thing to note, if you aren't using the text, just delete that text gameobject. No need to keep it if you aren't using it.
Position may be because of your canvas. How is your canvas setup?

To clarify, there are a number of things. Your canvas may be setup wrong. The image in the background may be setup wrong. The button anchors may be wrong. Since you are not changing stuff in code, one of these seems most likely.

 

Thanx for the tip. I am not sure what are you mean about the canvas set up.
I enclose 2 photos.
The buttons I am talking about are the canvas named "boombox-control" (picture 2) and it is a child inside a canvas called "cassette" (p.1). On the pictures you can see both canvas and their Inspector.
The problem is that until last week, The buttons were working fine and just tried to change the pictures and resize them, and then everything blew up.
On first I though that something I did wrong with the buttons, and recreate then from scratch, but same problem.
Could it be a *unity bug* ? Because I have updated Unity very recently (1week before), but I think that I had checked it and there was no problem.

 

I'll be honest, I've never used nested canvas before, so I can't say 100% how that changes images.
From the looks of things, your base canvas is a fixed size. The nested canvas is anchored in the bottom left.

Is there a reason you are using a nested canvas? I don't think this is a unity bug, just feels like things aren't setup right.

For ui for one of my games for example, there is a canvas usually set to scale with screen size(for different resolutions) and there is simply a background image and then other stuff like buttons, smaller images, etc that are under that and never had an issue.

 

It is nested because, first it was just the "inside" canvas object in parallel with the "outside" and needed to be nested so I just move them. Anyway, I change the inside canvas with an Empty Object. Also change the down left anchor to center. Nothing from there too,
but
If I create s button outside that thing with the cavas-es and images and buttons, somewhere else in the hierarchy, and then drag it as a child, it works fine!
So I override my problem (either ways I never figured out what is happening and why) and go on.
My question remains "What has happened there?" cause it is a very weird behaviour.
Thank for your support,
Spiroz