Steams gemenskap :: Guide :: Buttons with hover effect

Butikssida

TyranoBuilder Visual Novel Studio

Alla Diskussioner Skärmbilder Konst Sändningar Filmer Nyheter Guider Recensioner

TyranoBuilder Visual Novel Studio > Guider > KamiyaSofts guider

38 betyg

Buttons with hover effect

Av KamiyaSoft och 1 medverkande

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 Script

This guide requires NO knowledge of Javascript.

I hope it's helpfully!

Utmärkelse

Skapat av

Sokolada
Offline

KamiyaSoft
Offline

Kategori: Walkthroughs, Workshop

Languages: English

Lades upp

Uppdaterades

2 maj, 2016 @ 15:29

27 jun, 2021 @ 14:16

1,030	Unika besökare
72	Nuvarande favoriter

Guideindex

Överblick

Create an Image Button

Prepare for CSS

Create an CSS file

At the end

Kommentarer

Create an Image Button

First, we need a button with TyranoBuilder Script:

[button name="button_css" storage="scene.ks" target="*label" graphic="button_name.png" width="300" height="100" x="120" y="250"]

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.

[html]<link href="custom.css" type="text/css" rel="stylesheet">[endhtml]

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:

[macro name="css"] [html]<link href="custom.css" type="text/css" rel="stylesheet">[endhtml] [endmacro]

and use this code with:

[css]

Create an CSS file

Now we have to create a css file in an editor. I highly recommend notepad++.
http://www.giyf.com

1. Open the program
2. Use CSS

For example:
You want to move the image 20px to the right.

.button_css{} .button_css:hover{ margin-left: 20px; }

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:

.button_css{ background-image: url(data/image/button1.png); } .button_css:hover{ background-image: url(data/image/button2.png); }

The first graphic will be replaced with the second graphic.

Important if you use this

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: http://gtm.you1.cn/sharedfiles/filedetails/?id=674448716

52 kommentarer

< >

Vaga, Vagabond. 19 feb, 2024 @ 13:15

What code would I need to use if I also wanted a sound effect when I hover over the button?
Basically the image would change and a sfx at the same time.
Thank you for the help!

Sokolada [skapare] 27 jun, 2021 @ 16:45

Yeah! Glad to hear :)

fort8877 27 jun, 2021 @ 16:12

OH ! IT"S WORKINGGG!!!

thank you soooo much!! yes,

[button name="button_css" storage="test.ks" target=*test01 [b] graphic="button1.png" [/b] width="160" height="100" x=392 y=306 ]

graphic="button1.png" must be transparent, sorry I didn't see you'r note.

Thank you angain !!!

Sokolada [skapare] 27 jun, 2021 @ 14:06

Ah, I know your mistake. :)

At the end of this guide is a very important info: The graphic of the image button have to be transparent !

[button name="button_css" ... [b]graphic="button1.png"[/b] ... ] <--- This image has to be a transparent image. It may not button1 or button2. :) The Button changed, but u can't see it, because the button is the toppest layer.

Maybe i should note this at the beginning.

fort8877 27 jun, 2021 @ 10:40

I'm test

.button_css{
opacity : 0.8;
}
.button_css:hover{
opacity : 1;
}

It's working too.

fort8877 27 jun, 2021 @ 10:30

yes, this is my code

[html]<link href="custom.css" type="text/css" rel="stylesheet">[endhtml]
[button name="button_css" storage="test.ks" target=*test01 graphic="button1.png" width="160" height="100" x=392 y=306 ]

and my "custom.css"

.button_css{
background-image: url(data/image/button1.png);
}
.button_css:hover{
background-image: url(data/image/button2.png);

}

button1.png didn't change button2.png

Sokolada [skapare] 27 jun, 2021 @ 8:09

The image names have the same name u want to use?

fort8877 27 jun, 2021 @ 7:17

.button_css{}
.button_css:hover{
margin-left: 20px;
}

It's worked, but

.button_css{
background-image: url(data/image/button1.png);
}
.button_css:hover{
background-image: url(data/image/button2.png);
}

It's keep didn't work, i'm pretty sure my image and custom.css in the right place.
What did i do wrong?

Grindr 27 jul, 2017 @ 20:43

Nevermind! I was able to do it! Thank you so much for this tutorial!

Grindr 27 jul, 2017 @ 20:28

I was able to fix my previous issue but there seems to be an issue with the original image button not disappearing once the image changes?

< >