Accessible CSS Buttons

We can enable the ability for you to create buttons for your site that are accessible to people viewing your website with screen reading technology, and are in colors that make them easy to read. Contact Nina Wright if you are interested in enabling these buttons for your website.

Button Examples

Red
Orange
Green
Blue
Purple

How to Create Buttons

To create buttons, you will need to post one of the codes below into a “Custom HTML” block. Each button color has a corresponding HTML code to use. The buttons will only appear once they are enabled on the site, and will otherwise appear as regular hyperlinks.

HTML Codes

<a class="apv1-button solid red" href="#">Red</a>
<a class="apv1-button solid orange" href="#">Orange</a>
<a class="apv1-button solid green" href="#">Green</a>
<a class="apv1-button solid blue" href="#">Blue</a>
<a class="apv1-button solid purple" href="#">Purple</a>

Code and Button Example

Below you will see an example of the HTML code used to generate the button below it.

<a class="apv1-button solid orange" href="https://ufhealth.org/research-ufshands">Research at UF Health</a>
Research at UF Health