Jump to content

How to make a responsive button with a complicated design and use it for texts with different length?


fredMer
 Share

Recommended Posts

Hi,
What is the workaround to create 3 buttons with the same design but different texts (short text, medium length text, long text)?
a) do I need 3 different images as a background ? What if i don’t know the length of the text ?
b) or I can use a single image and shrink/stretch it horizontally/vertically somehow when a text needs more/less space to fit in?

I hope i don’t need hundreds of images for each button :slight_smile:

I’m just a beginner. What is the best practice ?

Link to comment
Share on other sites

it depends on the background. if it is a rectangle with rounded corners 3 images sounds correct. just slice the ends off and use a 1px wide image for the centre and stretch it for the width of the text. you could cheat and have just 1 end and flip it when drawing the other end but the first option seems standard. if it's a rectangle with square corners, you can just use 1px wide image and stretch it, so super simple. if it's a stylized background with elements which can't be limited to 1px and looks wrong when stretching, you can just repeat it over multiple text widths, at least that's what i'd do. in the end you'll just have to test test test.

Link to comment
Share on other sites

10 hours ago, hotfeet said:

it depends on the background. if it is a rectangle with rounded corners 3 images sounds correct. just slice the ends off and use a 1px wide image for the centre and stretch it for the width of the text. you could cheat and have just 1 end and flip it when drawing the other end but the first option seems standard. if it's a rectangle with square corners, you can just use 1px wide image and stretch it, so super simple. if it's a stylized background with elements which can't be limited to 1px and looks wrong when stretching, you can just repeat it over multiple text widths, at least that's what i'd do. in the end you'll just have to test test test.

Is it possible to resize just the middle of the image ? maybe on a lower level like pixi or even webgl ?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...