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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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