Buttons - Icon instead of box?


(Carey) #1

Hello! I would like to have an arrow icon as a button instead of a box and a letter. That’s not one of the element options. How can I do that?

Thank you!


(Jonathan Deutsch) #2

You can create a shape image in other software like Sketch or Photoshop, and import it into Hype.

Alternatively you could make a rudimentary arrow with steps like:

  1. Create a rectangle element
  2. Rotate it 45 degrees
  3. Insert it in a group
  4. Set the group’s content overflow to hidden
  5. Resize the group so it only shows half the rectangle, thus becoming a triangle.
  6. (optional) Uncheck ‘Constrain ratio’ from the Scale settings and use the command-key to scale the triangle to be at the angle you want
  7. Use another rectangle to act as the base of the arrow, and then group them together

I’d generally recommend the Sketch approach than all those steps, but there are a few ways to get creative with shapes :slight_smile:.


(Carey) #3

Hi Jonathan!

I got this to work by adjusting the rectangle element as you described.

Thank you so much!
Carey


(Trey Yancy) #4

Another option is to create caret-style (>) arrows by typing a caret or, if going with Jonathan’s suggestion, by using a stroke on the rotated box and no fill.

Note that you can use symbol webfonts as well.

My preference is to use Photoshop to create the arrows and drop shadows, and outputting them as PNGs. Monochromic arrows don’t work well on backgrounds that vary in tone and the drop shadow helps the arrows stand out regardless of background.

As for bitmap editing apps you might consider Affinity Photo or Affinity Design. They are both very powerful and very inexpensive ($49 from the Mac App store).