Turn a Link Into a Button, or Change the Color of a Link or Button

Turn a Link Into a Button

If you want to turn a link into a button, follow these instructions:

1. Click anywhere inside the link text that you wish to convert to a button.
2. In the editor bar, click the Link button.
3. Find the HTML Class field in the Options section in the modal window.
4. Enter button utility classes to style your button. You must apply a btn class, as well as a modifier class to change the button’s appearance. For example, if you want your button to be orange, apply the classes btn btn-wvu-accent--burnt-orange. Or, if you want your button to have an orange outline, apply the classes btn btn btn-outline-wvu-accent--burnt-orange. See our color suffixes to know the exact color to apply.

Change the Color of a Link or Button

1. Click anywhere inside the link text or button text that you want to edit.
2. In the editor bar, click the Link button.
3. Find the HTML Class field in the Options section in the modal window.
4. Enter the appropriate color utility classes to style your link or button.
1. For a link, just add a text-{color} utility class e.g. text-wvu-blue or text-wvu-accent--burnt-orange. See our list of color modifiers if you aren’t sure of the correct utility to add.
2. For a button, you must keep btn class, then add a modifier class to change the button’s appearance. For example, if you want your button to be orange, apply the classes btn btn-wvu-accent--burnt-orange. Or, if you want your button to have an orange outline, apply the classes btn btn btn-outline-wvu-accent--burnt-orange. See our color suffixes to know the exact color to apply.