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
- Log in to your WordPress site and go to the Microthemer workspace.
- Double-click a button you want to style.
- Create a selector for targeting the element by giving it a descriptive name (e.g. My Button) and save it in a folder.
- Choose from a selection of styling options such as gradient, rounded corners, and background color to make your button look nice.
- Add a hover state by first copying the selector (find the selector in the main menu and click the copy icon).
- Then click on the editing icon of the new copied selector (My Button Copy 1) to reveal it’s editing options.
- Rename the selector “My Button Hover“.
- 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 button.
- Apply the styles you want for the hover state and then view the effect by hovering your mouse over your button.
- 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.