Team,
I'm scaling up buttons and then adding photos for a "clickable link" to another page. Basically it looks like an articles block but with text over the photo. When I preview the site and resize, the photos don't shrink and the button becomes elongated as well, and the text in the button also extends beyond the button and doesn't resize. basically looking like crap.
I assume I'm doing something wrong. Any ideas?Firstly, when writing to the forum, just use plain text, you appear to have used the code option which places your comment in a scrollable text area - difficult for others to read.
The correct way to make an image button is to add a button to your page. Then, with the button selected, create a custom class. In the class editor window, use the metrics tab to adjust the size of your button in height and width. Then switch to the paintbrush tab and select a background image as shown in the screenshot below. Adjust the width of the image to the same as the button width (in the example below, the width was set to 329px) You can also use the position and repeat options to make sure your image displays correctly. If required, switch to the Text tab and adjust the line spacing to position the button text where you want it to appear.
Once you’ve created the button for your desktop view, change to the tablet and smartphone views and adjust the custom class settings for each view.
Hi,
Why not just use an image Bric and set the Interactions Type to Navigate to page or URL if it’s another website.
The image will be responsive and scale fine.
Cheers / Johny
I think the OP wants text over the image (I may have got that wrong, of course). I’m sure that can be added to the normal image solution, but may require a little more work.
Ok i missed that he wanted text over the image 
Here’s quick way to add text over a clickable image.
Hope it helps.
Cheers / Johny
You are a gem!
Thanks team!
Jakerlund,
So I tried this and it works great for adding the text, but when I slide over the browser to check on the elements responsiveness, the text does not stay centered and moves. How do I keep the text centered?
Also, I know this may seem like a stupid question, but everytime I write in this forum I'm not given the option to just use plain text and it writes as if I am writing code.Kevin, When you write to the forum your text is being wrapped in quotes. You’ll see the result in the preview to the right of your message - it will have a grey background. If that is happening automatically, just select all your text and click on the quote icon to remove the styling.
Can you explain which option you tried - the image or the button option. IF you try the button option, you can change the text position and button/image dimensions on a device by device basis - just use a custom class. I’m sure you can do the same with the image option also.
Weird. I’m not seeing anything in a grey background to the left, and certainly no qoutes. When I click on qoutes it creates them and then I remove them and everything looks plain text. No idea what is up with this.
Regarding the buttons. When I add an image, as long as I don’t add dimensions, the image and any other image will resize nicely as I drag and resize my browser window. I just ensure I make all images the size I want beforehand. When I add dimension info manually it messes up the formatting completely when I drag my browser. The images overlap and just general look like crap.
When I add a button then an image to a button and overlay text on the button when I resize the browser the button and photos resize nicely but the text shrinks and moves, usually down on the button and it looks pretty bad.
I’m obvioulsy not a coder so no idea why it is doing this.
Is there a way to slow down your videos? You go pretty fast for me. Audio narration would be helpful too. English 
Hi Kevin, My appologies - I wrongly said that your forum responses were being wrapped in quotes - what I should have said is that they are being shown as pre-formatted text (code). The screenshot below shows what was happening:
Now to the issue you’re having with image buttons. The problem is if you resize a button without doing anything else, things like the image itself and the position of text will not go along for the ride. The way to handle this is to create one image button on the desktop site. With the button selected, create a custom class for it and then set the parameters for the class as illustrated below.
When you set the button size in the metrics tab, you should set a height and width. You can now set an image for the button and size it according to the button size. Be sure to set the repeat option to no repeat. This should create an image that fits inside your button. Next, go the typography tab and chooses a suitable font and size for the desktop version of the button. You will notice that the button text will not be centred. To correct this problem, switch back to the metrics tab, select the top padding and use the slider control in the padding field to visually centre the text in the button.
Having created the desktop version, switch to the iPad view. If you need to change the dimensions of the button for this view, select the button and click on the class name. Change the dimension of both the button and the image and, if necessary, reduce the font size and adjust the padding to re-centre the text. Finally switch to the mobile view and repeat the process. Your button will now be good for all device sizes.
