Add a menu button in WordPress – any theme

Ever found yourself needing to add a nice and attention-drawing call to action button in your menu? I’m sure you have because there are so many situations in which such a menu button would be useful but I can list a few off the top of my head. Say you’re running a restaurant website and you want to direct your users to your booking page (either on-site or off-site), a button would serve this purpose very nicely. Or you have a medical site and would like to let your visitors call you directly from the site, a link with your telephone number nicely styled as a button would do the job just fine.

How do you add a menu button?

The good news is that this is an easy to do task, doesn’t require any kind of plugins and it works regardless of the theme you’re using, although some style tweaking might be required on your part to make it fit perfectly with your site’s design.

Just two steps to follow here:

  1. Navigate to Appearance > Menus, click on Screen Options, enable CSS Classes and then add your class.
  2. Time to style the button. Header over to Appearance > Customize > Additional CSS and add this:
    li.menubutton {
      background-color: #ff3b84;
      border-radius: 15px;
      margin-left: 15px; /* Remove if not needed */
    }
    li.menubutton a {
      color: #fff;
    }

The code above is just an example. You can build your own buttons using one of the many CSS button generators that are available online. Here is an example.

Subscribe for helpful tips and release info.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.