Image Button
The Image Button object is a highly visual interactive element in Game Launcher Creator. Unlike standard buttons that rely on text and basic colours, this object allows you to use your own custom graphics for its various interaction states, giving you complete artistic freedom over your interface.
Image Buttons are perfect for designing a truly unique Custom Game Launcher, allowing you to seamlessly integrate your game's branding, custom typography, and bespoke UI art.
Using transparent PNG images allows you to create non-rectangular buttons that blend perfectly into your launcher background.
Image Button Overview
An Image Button acts just like a regular button but relies entirely on graphic assets to communicate its purpose. It can swap its image instantly depending on whether the user is idling, hovering over it, or actively clicking it.
Because you control the exact pixels displayed, Image Buttons are frequently used for highly stylized primary actions or custom-shaped navigation icons in a Custom Launcher.
Typical Uses
- Graphic-heavy "Play" or "Update" buttons
- Custom-shaped social media icons
- Themed navigation menus
- Interactive map markers or inventory slots
- Visual toggles and settings icons
Default Image Button Settings
When an Image Button object is created, it starts with default placeholder graphics so it is immediately visible on your canvas.
| Property | Default Value |
|---|---|
| Width | 150 |
| Height | 50 |
| Idle Image | Blue "Idle" Placeholder |
| Hover Image | Dark Blue "Hover" Placeholder |
| Click Image | Deep Blue "Click" Placeholder |
Image Button Properties
The Image Button includes properties dedicated to managing your visual assets and audio feedback.
Images
You can assign different URLs or local file paths for the three main interaction states:
- Idle Image URL: The default image shown when the button is not being interacted with.
- Hover Image URL: The image displayed when the user's mouse cursor rests over the button.
- Click Image URL: The image shown momentarily while the user is actively clicking down on the button.
Sounds
To make your Custom Game Launcher feel more tactile and responsive, you can also attach audio to interactions:
- Hover Sound URL: A sound effect that plays when the mouse cursor enters the button area.
- Click Sound URL: A sound effect triggered the moment the button is clicked.
Custom CSS
For users of Developer Edition, the Image Button object supports Custom CSS overrides. This allows you to apply advanced styling like drop shadows, CSS filters, or complex transforms that apply directly to the image element.
Custom CSS is available exclusively in Developer Edition and provides ultimate control over object styling.
Image Button Events
The Image Button can trigger action sequences when interacted with, allowing you to build dynamic functionality into your launcher.
On Click
This event fires when the image button is clicked. It is the primary trigger used for launching games, opening websites, or changing launcher pages.
On Hover
This event fires when the cursor moves over the image button. It can be used to display tooltips, change background imagery elsewhere on the page, or update dynamic text labels.
Ensure your custom images are exactly the same dimensions to prevent the button from resizing or jumping when hovering or clicking.
Custom CSS Example
The example below shows how Custom CSS can be used in the Developer Edition to add a glowing drop-shadow and a smooth scaling effect on hover, elevating a flat image into a premium interactive element.
transition: all 0.3s ease !important;filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important;border-radius: 8px !important;:hover {transform: scale(1.04) !important;filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)) !important;}:active {transform: scale(0.98) !important;}Using CSS animations in conjunction with your custom images keeps your launcher lightweight while maintaining high visual fidelity.
Best Practices
Consistent Dimensions
Always ensure your Idle, Hover, and Click graphics share the exact same canvas size. If the hover image is a few pixels larger, the interface will shift unpleasantly during interaction.
Pre-Bake Your Text
Since the Image Button relies purely on graphics, any text you want displayed (like "Play" or "Settings") should be baked directly into the image assets using your preferred photo editor.
Use Subtle Feedback
A good hover state doesn't need to be entirely different from the idle state. Often, a slight increase in brightness, an added glow, or a small drop shadow is enough to communicate interactivity.
Summary
The Image Button is an essential tool for creating a highly bespoke Custom Game Launcher. By combining your own custom graphics for idle, hover, and click states with integrated sound effects and Developer Edition Custom CSS, you can craft interfaces that perfectly match your game's unique aesthetic.