Rectangular Buttons & Other Shapes & Sizes

Looking for rectangular buttons? How about other shapes?

Custom Shaped Buttons

The following builds on a reply to a post by David at Buzztouch.

Two square buttons pointing to the same link are in essence a rectangle.

Example 10×10 grid, buttons 3&4 on row 5 point to same link, buttons 6,7,8 point to same link, in effect two rectangular buttons of different sizes. Use combination of different rows and even more complicated patterns.

Something important to remember, The gray square rectangles in Buzztouch, are not Buttons, they’re sort of like place mats, a place to set your buttons (plates).

Here’s the link to David’s orginal  post on how to make rectangular button:

a) Make a background image with your ‘highlighted’ hot spots. Things to click on. This is one plain-jane image you mocked up in photoshop. It LOOKS LIKE a bunch of clickable hot spots with callouts, text, graphics, whatever. The user just kinda gets it that things on this image are clickable. In the case of a map, users will for sure click on text labels and shapes.

b) Set this as the background on a button menu. In the advanced settings of the menu, set no scroll so nothing moves.

c) Next, imagine an invisible grid over the top of the image. Each square in the grid holds a button. All of the buttons are transparent .PNG images. The same image in fact. No icon, no text label, just a transparent image. So far so good, tons of hidden buttons over the background.

d) Next, figure out the optimal size for the squares in the grid. 10 x 10, 50 x 50? It’s up to you and the best size will be determined by the underlying image and it’s fake hotspots.

e) Set the images / buttons to load ‘nothing’ when tapped on the squares that don’t have an underlying hot spot. Set the images / buttons that overlap a hotspot on the underlying image to load the proper screen. It’s likely that many of the buttons will load the same screen, like the adjacent buttons that all overlap the magic text or whatever.

Tip: When doing design work and figuring out all the funky details, use a semi-transparent button image so you can see the underling graphic and the button at the same time. When your done, re-make the image so it’s transparent. Don’t make a new image with a new file name because then you’ll need to modify all the image names in your control panel (each button). Just use the same image and re-save that baby as totally transparent when you’re ready to go live.

Oh, wait, you could also just use the transparency setting in the control panel when you’re done. I think you can set it to 100 for totally visibile and 0 for invisible.

Posted from WordPress for Android by Fredt4


3 thoughts on “Rectangular Buttons & Other Shapes & Sizes

  1. Hi Fred,

    I know this post is old but I came across it while trying this same ‘trick’ but not being able to find a way on buzztouch to set some of the grid buttons to ‘do nothing’. Any help would be greatly appreciated!!!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s