Simulating image as buttons

Being there, a good form of optical illusion using Glide :wink:.

Putting images to simulate buttons, a good technique taught by my friend @Lucas_Pires.

acaibeat.glideapp.io

Veja apresentação https://youtu.be/NuQ3OKcIzos.
Açaí Beat

6 Likes

Been doing this for some of my clients since I saw @Lucas_Pires’s restaurant app. Beautifully done!

2 Likes

Thank you for the shout out @Roberto_Salim! The app’s awesome

Great news! Thank you @ThinhDinh!

1 Like

@Roberto_Salim Nice work! Haven’t seen emojis in tab text. Cool👍

I

Awesome!
This is a great way to provide a simpler UX.
I did this as well with images.
Each word points to the corresponding menu.
There even aren’t any tabs!


https://paititi.glideapp.io/

3 Likes

Cómo se hace me podrías explicar
Usar la imagen como botones

Insira a imagem normalmente, lá me FEATURES em ACTION selecione a opção LINK TO SCREEN e direcione a guia para onde ir ao clicar na imagem, no caso da foto abaixo direcionei para o meu Cardápio.

A construção da tela de uma imagem em cima da outra com os botões desenhados fica por conta de como você irá fazer.

Where can I find instructions in English on how to create images as buttons?

Just add an image component and set the action.

https://docs.glideapps.com/all/reference/actions

Jeff,
Two questions:
1.
The button images appear to float on top of the background image can I do the same with a free account?
2.
How is the positioning of the buttons accomplished?

It’s an illusion. There is no background. It’s a single image that’s been cut up in an image editor, uploaded as separate images with separate urls, and added to the app as separate image components that give the illusion of image buttons on a background.

You’ll notice if you tap anywhere to the left or right if the simulated “button”, it will still open the link because the entire image section is clickable. Because of this, you can’t have buttons side by side. You’ll notice that anybody that has done this will have buttons that are laid out top to button. They may be staggered, but will never be side by side.

1 Like

@Jburnsjr Depending on what you want to achieve and what you can accept in a background, you could use tiles as a mean for simulating buttons side-by-side. You can place the tiles close together - but there will be space between them. If you use images which are white where the tiles meet you might mimic a background image.

Linking out of the app:

Linking inside the add:

1 Like

That’s the magic , isn’t it :sunglasses:

1 Like

How did you go about creating an order number before adding products to the cart?

Let me see if I understood. Are you trying to charge me for something that this forum does for free? This forum is not used to make money, but to help users, just so you know I found in this same forum the help I needed without having to pay for it.