< Back to Style Guide
Buttons
Buttons serve as vital components in guiding users through our digital platforms, offering clear calls to action and enhancing overall user experience. As part of the UF College of Education’s commitment to accessibility and inclusivity, it’s essential that our buttons not only engage users but also adhere to ADA compliance standards.
Jump to section:
Prestyled Button Designs | Utilizing Global Styles
Utilizing Button Styles
Method 1 – Button Presets
By utilizing preset styles, users are able to incorporate various button designs easily and quickly. To change the preset design for a button module, follow the following steps:
- Add a Button module to the area of the page you’d like to include the button.
- In the upper right hand corner of the settings, click the dropdown and change the button from “Default” to the preferred style you’d like to incorporate.
NOTE: Inline buttons are only available as predesigned module templates.
Method 2 – Module Templates
Users are also able to incorporate button styles by adding a button from premade Divi Cloud templates. To add a button module from Divi Cloud, follow the steps below:
- Click on the grey “+” to add a module and go to “Add from Library”
- Select the desired button design from the list of available options.
Prestyled Button Designs
Light Background Buttons
Default – Orange Transparent Button
Sherbet Transparent Button
Navy Transparent Button
Inline Orange Button with Arrow
Dark Background Buttons
Sherbet Transparent White Text Button
White Transparent Button
Inline White Button with Arrow
Orange Transparent White Text Button
Teal Transparent Button
Inline Sherbet Button with Arrow