Developers / Sign-in button

The sign-in button

Use these on your sign-in page so people recognise Verified Ham at a glance. Point the link at the route in your app that starts the sign-in (/auth/verifiedham below is a placeholder).

Green, for light backgrounds

As an image

<a href="/auth/verifiedham"><img src="https://verifiedham.net/assets/buttons/sign-in-green.svg" width="241" height="40" alt="Sign in with Verified Ham"></a>

Also as a PNG at twice the size, for email and old browsers: sign-in-green.png

As HTML, no images or stylesheet

<a href="/auth/verifiedham" style="display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;box-sizing:border-box;border:1px solid #1f6f4a;border-radius:6px;background:#1f6f4a;color:#ffffff;font:bold 15px/1 Helvetica,Arial,sans-serif;text-decoration:none">
  <svg width="22" height="22" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#ffffff"/><g fill="none" stroke="#1f6f4a" stroke-linecap="round"><path d="M16 9v15M12 24h8" stroke-width="2.6"/><path d="M11.5 13.5a6.4 6.4 0 0 1 9 0M8.3 10.3a11 11 0 0 1 15.4 0" stroke-width="2.4"/></g><circle cx="16" cy="17" r="2.4" fill="#1f6f4a"/></svg>
  Sign in with Verified Ham
</a>

White, for dark or busy backgrounds

As an image

<a href="/auth/verifiedham"><img src="https://verifiedham.net/assets/buttons/sign-in-white.svg" width="241" height="40" alt="Sign in with Verified Ham"></a>

Also as a PNG at twice the size, for email and old browsers: sign-in-white.png

As HTML, no images or stylesheet

<a href="/auth/verifiedham" style="display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;box-sizing:border-box;border:1px solid #cdd2da;border-radius:6px;background:#ffffff;color:#16181d;font:bold 15px/1 Helvetica,Arial,sans-serif;text-decoration:none">
  <svg width="22" height="22" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#1f6f4a"/><g fill="none" stroke="#ffffff" stroke-linecap="round"><path d="M16 9v15M12 24h8" stroke-width="2.6"/><path d="M11.5 13.5a6.4 6.4 0 0 1 9 0M8.3 10.3a11 11 0 0 1 15.4 0" stroke-width="2.4"/></g><circle cx="16" cy="17" r="2.4" fill="#ffffff"/></svg>
  Sign in with Verified Ham
</a>

Guidelines

Say "Sign in with Verified Ham". "Log in with Verified Ham" or "Continue with Verified Ham" are fine too.
Keep the icon and the colours as they are. Scale the button up or down as a whole.
Give it at least as much prominence as your other sign-in options.
If you show a verified call sign afterwards, a link to the operator's verified page (https://verifiedham.net/CALLSIGN) lets others check it.