You can disable image rendering by setting ImageButton.ImageTransparency to 1. This will leave you with a plain rectangle that can be used as a button. However, it may be better to use a blank TextButton for this.
1-- Place this code in a LocalScript in an ImageButton2local imageButton = script.Parent34local colorNormal = Color3.new(1, 1, 1) -- white5local colorHover = Color3.new(0, 1, 0) -- green6local colorPress = Color3.new(1, 0, 0) -- red78-- This is a 32x32 image of a backpack9imageButton.Image = "rbxassetid://787458668"10imageButton.BackgroundTransparency = 11112local function onActivated()13 print("open the inventory")14end1516local function onPressed()17 imageButton.ImageColor3 = colorPress18end1920local function onReleased()21 imageButton.ImageColor3 = colorHover22end2324local function onEntered()25 imageButton.ImageColor3 = colorHover26end2728local function onLeft()29 imageButton.ImageColor3 = colorNormal30end3132imageButton.MouseEnter:Connect(onEntered)33imageButton.MouseLeave:Connect(onLeft)34imageButton.MouseButton1Down:Connect(onPressed)35imageButton.MouseButton1Up:Connect(onReleased)36imageButton.Activated:Connect(onActivated)3738-- Start with the default, non-hovered state39onLeft()
Indicates whether the Image has finished loading from the Roblox website.
Determines how an image will scale if displayed in a UI element whose size differs from the source image.
The Image property is a content-type property that should hold the asset ID of a Decal or Image on the Roblox website. It functions identically to Decal.Texture with regards to loading the image from the Roblox website. The rendered image will be colorized using ImageButton.ImageColor3. It is possible to make the image render as tiled, scaled to fit, or 9-sliced, by adjusting the ImageButton.ScaleType property.
The ImageColor3 property determines how an image is colorized. When set to white, no colorization occurs. This property is very useful for reusing image assets: If the source image is completely white with transparency, you can set the entire color of the image at once with this property.
The ScaleType property determines in what way an ImageButton.Image is rendered when the UI element's absolute size differs from the source image's size.
By default, this property is Enum.ScaleType.Stretch, which will simply stretch/compact the image dimensions so it fits the UI element's space exactly. Since transparent pixels are set to black when uploading to the Roblox website, transparent images should apply alpha blending to avoid a blackish outline around scaled images.
For Enum.ScaleType.Slice, the ImageButton.SliceCenter property will be revealed in the Properties window. This is for 9-slice UI: when scaling up, the corners will remain the source image size. The edges of the image will stretch to the width/height of the image. Finally, the center of the image will stretch to fill the center area of the image.
Finally, for Enum.ScaleType.Tile, the ImageButton.TileSize property will be revealed in the Properties window. This is for tiled images, where the size of each image tile is determined by the ImageButton.TileSize property.
The SliceCenter property sets the slice boundaries of a 9-sliced image when ImageButton.ScaleType is set to Enum.ScaleType.Slice. Please note that this property is only visible in the Studio Properties Pane if ImageButton.ScaleType is set to Enum.ScaleType.Slice. Select this property and click the "..." button to open the 9-Slice Editor, a built-in visual editor for setting the slice boundaries.
To learn more about 9-sliced images, check out this tutorial: UI 9 Slice Design.
Scales the 9-slice edges by the specified ratio. This means that the edges around the 9-slice will grow as if you'd uploaded a new version of the texture upscaled. Defaults to 1.0.
As a multiplier for the borders of a 9-slice, it is useful for reusing one rounded corner image for multiple radii
TileSize sets the tiling size of the ImageButton. The default UDim2 values are 1,0,1,0. The scale component of the UDim2 will scale the tile based on the size of the ImageButton. The offset is in raw pixels. The tiling starts at the upper left-hand corner of the image. For example a scale of 0.5 will mean the tile will be half the size of the ImageButton (in the corresponding axis).
This property is only active if the ScaleType for the ImageButton is set to Tile instead of Slice or Stretch.