Button styles are more complicated than they look!

Install Theme View Source

Bug fixes

I’ve been fighting with the “button” class’s line height behavior for a couple versions, now. I believe it should finally be resolved.

Thanks to a user of Cover2 who is generously translating it into Arabic, a typo in the theme’s Jetpack plugin support has been identified and fixed. (Thanks, Ahmad!)

New stuff

As long as I was making changes to the button styles, I decided to add some menu enhancements. You can now use the button classes (“button”, “default”, and “ghost”) on menu items.

It’s hidden by default, but WordPress allows you to add CSS classes to menu items. On the Appearance > Menus page, click the Screen Options tab at the top of the screen. Then check the “CSS Classes” checkbox.

For any item you’ve added to a menu, you can now add CSS classes. To give a menu item a button appearance, just type in “button”.

The default button is a dark gray color. You can add the “default” class to make the button use the theme’s accent color (which you can change in the Customizer under Colors), “ghost” to make the button only use an outline, or combine them to make an accent-colored outline button.

I have a couple things to note here. The navbar’s background color is also customizable, so the buttons’ text color will change as appropriate. The outline button will change its outline, but the regular button will not change its background. The accent-colored buttons will not change, so it is possible to get some colors that don’t match very well.

So far, I’ve shown you links styled as button in the navbar. There are a couple other ways to add a menu in Cover2, however. You can add a menu to the overlay, and you can add a menu to any widget area. (This means not only the overlay widget area but also one of the three footer widget areas.)

Both the overlay and the footer widget areas can be given a dark or light color. Unlike the navbar links, button-styled menu items in the overlay or footer will be the reverse color. Accented buttons will still retain their color.