“Ghost buttons” simplify calls to action by removing their backgrounds in favor of a thin line. Trendy and effective, when done well, they attract attention with high contrast while putting a new spin on the “flat” look. Here’s how you can boost your mobile site designs with ghost buttons, which you can create in UXPin.
Ghost buttons easily blend into the environment of your design. They are buttons that don’t look like your average “let’s just tap that” button. They’re simply an outline of a button — a transparent pane — that’s usually white or black with some text in the middle. And they create a bit of visual interest to your mobile site or app. With that, log in to your UXPin account (or start a free trial) and let’s get started.
1. Create a button
Drag a button from UXPin’s element library onto the canvas. In this case, we’ll use white lines on a colored canvas.
2. Change its colors
You’ll need to change the button’s text, border and background colors. Luckily all three are available in the “style” menu on the right.
Choose a color for the border and text that contrasts well against the background. In this case, we’re choosing white against dark blue. The button’s background, however, needs to be transparent, here’s how to do it:
3. Turn on the line
Make sure that the button’s border is set to one pixel and its color to the hue of your choice — look near the middle of the “style” menu on the right.
4. Turn off the shadow
UXPin’s buttons come with an automatic drop shadow. Turn it off in the “custom” menu.
See the process in action
All together now: This visualization takes you through the steps to create a ghost button. See the example for yourself with this prototype in UXPin. Take what you learned and build your own ghost buttons — Log in to the app!