Design How-to: Ghost buttons



A recent trend in web design has been the adoption of the ghost button – a no-fill link button in a basic shape with a simple outline. These minimalist link buttons are easy to design within the Moonfruit software and this quick how-to will help you to create your own.


Link Button

We start by adding a simple link button. Click the ‘Insert’ option > ‘Link Button’.


Edit Link Button

A default link button will appear on the page. First, edit the text that appears on the button by double clicking on it.


Design Button

Now we can start designing our button. From the floating Editor, navigate to the ‘Style’ tab. Here you can change the following:

  • Border: Pretty self explanatory – this is the border that appears around the text, to form the button. Change the number to edit the border width (in pixels). As an example, 0 px will produce no border whilst 5 will create a bold border around your text. We choose 2px in this example.
  • Padding: Padding is the space between the text and the button edge. We’ve chosen 10px. You can also stretch the edges of the button using a click and drag of the mouse, to enlarge the button as necessary.
  • Corners: The larger the number, the more rounded your button. In our example we want square corners, so set this to 0px.


Button Colour

You can change both the normal and rollover/hover colour of the button. For both options you can edit:

  • Text
  • Button
  • Border

Click the small arrow under each to change the colour and adjust transparency. To make the button fully transparent, move the Alpha slider all the way to the left.


Rollover Colour

Toggle over to the ‘Rollover’ panel. You can change the text, button and border colours in exactly the same way. We have created a white button with a green hover colour.


Linking The Button

Via the ‘Link’ tab, choose a link type. If you’re linking to a category in your shop, click the cart icon and select a category to direct to, then click ‘Apply’ and save your changes. Finally, click ‘View my Site’ in the top right corner of the editor window and hover your mouse over your button to test it out!

If you have any design tips let us know in the comments!


More posts by this author

Add a comment

  • (will not be published)

More posts by this author