Creating consistent buttons through CSS overrides

  • This simple link: <a href="URL">Visible Link Text</a>

    Visible Link Text

    Becomes a blue button with the addition of these classes - which are available from the CSS Overrides file.

    <a class="uebutton color-blue icon pdf" href="URL"><span class="null">Visible Link Text</span></a>

    Visible Link Text

    uebutton - established basic button characteristics.

    color-blue
    color-orange
    color-gold
    color-skyblue
    Defines the color or the button background and text color. Each already has a fixed hover color.

    icon
    declares that an icon will be used

    arrows

    pdf
    video
    external-link
    give-dollars
    Make a Gift Online Today
     Make a Gift Online Today
    give-time
    medical-mask
    Word in button above is class for icon

    width-full
    makes the buttons full with of column

    center
    centers to the text in the button width. (not needed is button is not full width)

    stacked
    makes top margin 0 and set bottom margin tighter for stacking buttons

    When hand coding buttons: target="_blank" rel="noopener noreferrer" is added to A tag when a link is opening a new window.

    If buttons are being added in an "Embed App" the Aria attributes must be added to the A tag by hand.
    Example: add this code inside the A tag:  aria-label="text for WCAG guidelines"