Image based buttons

Feature Requests
1

Not sure if this is possible…
An image based button would use images instead of text and backgrounds.

e.g.
Normal - Image 1
Hover - Image 2
Pressed - Image 3

image-based-buttons.jpg1108×861 138 KB

2

How it might look from the Elements menu:

3

Well, actually, it already exists : it’s “Textured button”.
Just choose “Image” in the menu instead of color or fade and the job is done.

ImageButton.hype.zip (144.8 KB)

1 Like
4

Yes indeed this would be a convenient feature for everyone who would like to interact with images and see the interaction visually.

However, it can be easily achieved with two simple timelines (hover and on click) with two key frames only (before and after state). If you move the mouse off the image again without clicking, the timeline just plays reverse.

Agreed, this feature would probably speed up the workflow for someone using image interaction a lot.

5

Thanks… Still learning :wink:

6

Image buttons are entirely possible, simply use the “Choose” button to select different images while selecting a hover/pressed state. Do note there’s a small (and unfortunately longstanding) bug: before setting the hover/pressed state you must first set the normal state’s background to be an image. Then all the other states you can choose images for.

@kerguelen’s example shows this.

This works for any button type - “Button” and “Textured Button” are really identical elements other than their default styling. In fact, you can choose “Edit > Show Button Controls” for other control types as well to turn them into buttons.

7

Thanks for the heads up Jonathan, appreciate your help with this :wink:

8

“Image buttons are entirely possible, simply use the “Choose” button to select different images while selecting a hover/pressed state.”

Can’t believe I missed seeing the Fill Style ‘Image’ option in the drop down list.
Pretty much like I failed this awareness test :wink:

3 Likes
9

I had missed this too! I have been slaving away with the whole 2 state button timeline thing! Thanks for asking.

1 Like
10

Is it possible to create a button image which doesn’t scale filling the whole button content? Now, if I create a button with backround image with small arrow in it, the arrow tries to fill whole button.

I tried to prevent it with css:

button {
background-repeat: no-repeat;
background-position: center center;

}
which accomplishes nothing. Do I have a wrong tag or what would help?

11

Hi @ilkka_kumpunen

The buttons that are created within hype’s Elements drop down are divs.

You have to assign it an ID and then create a style ruling for background-size.

The initial setting is 100% so you can change it to whatever you want.

<style>
#**your-ID** {
    background-size: 20% !important;
}

NOTE* the repeat is already set to no-repeat initially.

D

3 Likes
12

Ok, thank you. I test it immediately. :+1: