Step 1: SimpleLogin button

SimpleLogin does not impose any hard guideline on the button color, font, etc but gives rather the following recommendations. Some recommendations are inspired from other third party sign-in providers.

  • The button should have the SimpleLogin visual branding so user can regconize it.

  • The SimpleLogin Sign-In button must be displayed at least as prominently as other third party sign-in options. For example, buttons should be approximately the same size and have similar visual weight.

  • To encourage users to click the button, we recommend the call-to-action text "Sign in with SimpleLogin" or "Sign up with SimpleLogin" or "Connect with SimpleLogin". It should be clear to the user that they are signing in to your app or signing up for your app with their SimpleLogin credentials, not signing up or registering for a SimpleLogin account on your app.

  • SimpleLogin logo in the "Sign in with SimpleLogin" button, preferable on the left side of the button.

The logo can be downloaded as png or svg

Below are examples of the SimpleLogin button with different styles based on Bootstrap and Social Buttons for Bootstrap that can be produced with the following code, also available on JSFiddle

<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap social for styling social login buttons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
<!-- To include SimpleLogin icon -->
<link rel="stylesheet" type="text/css" href="https://simplelogin.io/font/flaticon.css">
</head>
<body>
<button class="btn btn-social btn-primary">
<i class="flaticon-021-shield-7"></i> Connect with SimpleLogin
</button>
</body>
</html>