Overview
Hi guys.Bad English incoming~I’ve heard that some of you want a guide that explains how to add a hover effect on buttons.Skills requirement:- CSS- TyranoBuilder ScriptThis guide requires NO knowledge of Javascript.I hope it’s helpfully!
Create an Image Button
First, we need a button with TyranoBuilder Script:
- button initializes the button code
- name=”button_css” sets the CSS-Class (important for the guide)
- storage=”scene.ks” sets the scene target
- target=”*label” sets the label target
- graphic=”button_name.png” sets the graphic
- width=”300″ and height=”100″ sets the size
- x=”120″ and y=”250″ sets the position
The css class name of the button must be unique (unless you want to apply the same css properties).
Prepare for CSS
Now we must load a css file.
This code is a html code that’s why we have to use the html tag ([html] [/html]).
- href points to the target file. The css file is calling “custom.css” at this example.
- The other code snippets are not necessary for us.
Important: This code have to be in front of the Image Button Code; in the same scene. Otherwise you’ll have to initialize the html code with macro:
and use this code with:
Create an CSS file
Now we have to create a css file in an editor. I highly recommend notepad++.
[link]
1. Open the program
2. Use CSS
For example:
You want to move the image 20px to the right.
- The dot initializes the following code as a css class
- button_name is the name you gave the image button
- The { and } are the beginning and the end of the statement
With the aid of the statement the picture moves 20 pixel to the right.
3. Save
Save the css file in your project main folder (where the index.html is)
At the end
Now it should work 😉
An hover effect with graphics:
You want to change a graphic with mouseover:
The first graphic will be replaced with the second graphic.
The graphic of the image button have to be transparent!
Example project: buttons with hover effect[drive.google.com]
We used this method in our game on greenlight to create custom buttons for our title screen (first variant) and the decision buttons (second variant) which you can see here: [link]