Styling

We use CSS variables for button styling, if you want to customise the buttons colours/hover states, you can override the CSS properties yourself. Due to CSS specificity rules, add this after the <AuthentifiedProvider>...</AuthentifiedProvider> otherwise they will not override the internal default values.

Default style

Default hover style

Default CSS variables

    <style type="text/css">
      {`
      [data-authentified-container] {
        font-size: 16px;
      }

      [data-authentified-button] {
        --authentified-button-bg-color: #FFF; 
        --authentified-button-border-color: #000;
        --authentified-button-border-radius: 0px;
        --authentified-button-border-style: solid;
        --authentified-button-border-width: 1px;
        --authentified-button-color: #000;
        --authentified-button-max-width: 30em;
        --authentified-button-padding: 0.75em 2.5em 0.6em; 
        --authentified-button-transition: all ease-in 0.13s;

        --authentified-button-bg-color--hover: #000;
        --authentified-button-border-color--hover: #000;
        --authentified-button-color--hover: #FFF;

        --authentified-button-sold-bg-color: #FFF;
        --authentified-button-sold-border-color: rgba(0, 0, 0, 0.2);
        --authentified-button-sold-border-style: solid;
        --authentified-button-sold-border-width: 1px;
        --authentified-button-sold-color: "#525252";

        --authentified-button-sold-border-color--hover: #000;
        --authentified-button-sold-bg-color--hover: #000;
        --authentified-button-sold-color--hover: #FFF;
      }
      `}
    </style>