Redesign A Button Using Microthemer

Note: the video above demonstrates how to style a regular text link like a button, using a slightly different method than outlined below, which takes advantage of some modern Microthemer features.

To change the appearance of a button follow these steps

1. Log in to your WordPress site and go to the Microthemer workspace.
2. Double-click a button you want to style.
3. Create a selector for targeting the element by giving it a descriptive name  (e.g. My Button) and save it in a folder.
4. Choose from a selection of styling options such as gradient, rounded corners, and background color to make your button look nice.
5. Add a hover state by first copying the selector (find the selector in the main menu and click the copy  icon).
6. Then click on the editing icon of the new copied selector (My Button Copy 1) to reveal it’s editing options.
7. Rename the selector “My Button Hover“.
8. Even though you may feel out of your depth with this, modify the CSS Selector code. Type :hover immediately after the code that is already there (no spaces). Then click the edit selector button.
9. Apply the styles you want for the hover state and then view the effect by hovering your mouse over your button.
10. Optional Extra: if you notice that the button changes appearance very briefly during the mouse click action, this will be due to styles being applied by an :active pseudo selector somewhere in your theme. To override such styles, repeat the same copying process you did to create a hover selector (copy the original button selector) . But set the selector label to “My Button Active“. And type :active immediately after the code that is already there. You can then apply styles to change how the button looks at the exact moment the user clicks on it.