Textured Button Textalignment

Getting Started
1

Hi. Just starting to love Hype. As I am doing a SVG based button I would like to know, how to get the Button text below the image - line height does not do it …

(button texture / image)
(10px)
(button text)

Can you gibe me a hint, where to look this up?

Thanks.

2

Works now.

Added a Class (Button) to the related textured Buttons with the following CSS styles …

.Button {
	background-size: 55% auto !important;
	background-position: 50% 0 !important;
	}
.ButtonText-1 {
	position: absolute;
	bottom: 0;
	width: 100%
}
.ButtonText-2 {
	text-align: center;
}

… and this as inner HTML (CMD+ALT+E) of the Button-Text

<div class="ButtonText-1"><div class="ButtonText-2">Button-Text</div></div>

The bg size is reduced, because some button text was wider than the width of the image.

Greetings.

3

Hi Wim!

I would like to address the comment in your first post about the (built-in) line height setting not working for placing the button text below the image. The demo project below only uses Hype’s own controls.

You want to make sure you select the button (not the text) to set the formatting (line height, centering, etc.).

innerHTML of the button:

<img src="${resourcesFolderName}/Warning_LightUI.svg" height="30" width="30"><br>
Warning


EDIT: I see that You are new to Hype (or at least the Forum - Welcome!). Do be aware that You can set unique text formatting for each of the the different button states (“Normal”, “Hover” & “Pressed”). The button states should show up in Hype when You click the button. If these controls are not visible when selecting the button then select: “Edit” menu > “Show Button Controls”.

Not only can You change the formatting You can also change the button text itself. Select the button and the desired button state, then - while the button is still selected - type “opt-cmd-E” the keyboard shortcut for editing the element’s innerHTML. Type in the new text. You can change the image as well, giving You complete control of the rollover effect. (You can also, of course, change the look of the button itself.)
Note: These settings are not done in the demo project.


Hype Project: TexturedBtnSVG.hype.zip (19.3 KB)

Screen shot from the project:

1 Like
4

Thanks a lot - looking forward to take a look!

5

Hi Jim,

Good morning.

Is it possible to prevent a button to break text over 2 lines without CSS rules?

I generated a series of buttons for an ongoing landscape iPad project (Hype file as screenshots attached).
When viewed In Safari and Chrome on iPad, I noticed that the button, at a given width, will break the text over two lines. For example, the « Introduction » button is well rendered from a width >= 118px but not working <=117px.
Is there a basic rule to follow within Hype?
On my desktop, by scaling the screen at 1024 by 768 px, the rendering is fine. Just noticed that on iOS.

Thanks to comment.

PYPlourde

http://conceptpir.com/test_buttons.html

test_buttons.hype.zip (50.5 KB)

iOS_Chrome.PNG2048×1536 319 KB
iOS_Safari.PNG2048×1536 315 KB

6

@31416

I don’t really have an answer other than make the button wider to accommodate the various browsers’ rendering.