LuxID button designer

Configure a LuxID sign-in button and take away the files. Everything here is generated from the LuxID developer documentation, so what you download matches the guidelines by construction. Works offline: keep it in the unzipped package folder.

Mode
Label
Variant and size
Corner
Width
Preview surface

Preview

built with CSS - hover it
the SVG file

Guideline checks

    For your web page

    Build the button in CSS. The label stays real text, so it scales with the reader's font size, translates, and can carry hover, focus and disabled states. This is what the guidelines recommend.

    
      
    Three files: luxid-button.css, the snippet, and the ID picto it
      references. Put the picto where your app serves static assets and update the
      src in the snippet to match.
    
      
    Load Roboto Bold with the button. The preview above sets the
      label in it, and so did the SVG next to it; without it the stylesheet falls back to your
      system UI font and the button comes out a few pixels wider or narrower than either.
    

      
    

      
    For email, slides, print and design tools
    
      
    These bake the label into the artwork, which makes it an
      image of text: it will not scale with the reader's font size (WCAG 
      SC 1.4.4 and 1.4.5). Do not put them in a web page.