Steam Community :: Guide :: Buttons with hover effect

Store Page

TyranoBuilder Visual Novel Studio

All Discussions Screenshots Artwork Broadcasts Videos News Guides Reviews

TyranoBuilder Visual Novel Studio > Guides > KamiyaSoft's Guides

38 ratings

Buttons with hover effect

By KamiyaSoft and 1 collaborators

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!

Award

Created by

Sokolada
Offline

KamiyaSoft
Offline

Category: Walkthroughs, Workshop

Languages: English

Posted

Updated

2 May, 2016 @ 3:29pm

27 Jun, 2021 @ 2:16pm

1,024	Unique Visitors
72	Current Favorites

Guide Index

Overview

Create an Image Button

Prepare for CSS

Create an CSS file

At the end

Comments

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 Comments

< >

Vaga, Vagabond. 19 Feb, 2024 @ 1:15pm

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 [author] 27 Jun, 2021 @ 4:45pm

Yeah! Glad to hear :)

fort8877 27 Jun, 2021 @ 4:12pm

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 [author] 27 Jun, 2021 @ 2:06pm

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:40am

I'm test

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

It's working too.

fort8877 27 Jun, 2021 @ 10:30am

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 [author] 27 Jun, 2021 @ 8:09am

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

fort8877 27 Jun, 2021 @ 7:17am

.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 @ 8:43pm

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

Grindr 27 Jul, 2017 @ 8:28pm

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?

< >