EGI Check-in button configuration

The EGI Check-in Login and Sign-up buttons that come with our Software Development kit, are easy to integrate and include built-in guidelines that ensure a consistent design and experience across different apps and systems using EGI Check-in service.

Assets

These are the assets necessary to create the buttons. The EGI logo is presented as an SVG file, which makes it have limitless scalability.

EGI Logo colored
format: svg file
name: egi-logo-color.svg

Right click this file and select download.

EGI Logo white
format: svg file
name: egi-logo-white.svg

Right click this file and select download.

DM-Sans

Typeface
format: google fonts or local

Connect your application to Google Fonts. Or- if your application supports local typefaces, you can download it from Google Fonts and host it on your server.

To link the font to your project, add the following code inside your <head> code: <style>@import url('https://fonts.googleapis.com/css?family=DM+Sans');</style>

View DM-sans on Google Fonts

Button Blue border

Approved usages

The following are live previews of the approved usages for the sign up, login and continue with EGI check-in variants.

Sign in with EGI Check-inLogin with EGI Check-inContinue with EGI Check-in
HTML Code
Styling CSS Code

HTML Code

The following HTML code is the base for all blue border buttons. Add one of these on the location you would like to display the button.

<a href="#linkhere" class="button-blue-border">Sign in with EGI Check-in<a>
<a href="#linkhere" class="button-blue-border">Login with EGI Check-in<a>
<a href="#linkhere" class="button-blue-border">Continue with EGI Check-in<a>

Styling CSS Code

The following CSS code is the base for all blue border buttons.

.button-blue-border {
  display: inline-block;
  width: auto;
  margin: 20px 20px 0px 0px;
  padding: 20px 30px 20px 80px;
  border: 2px solid #005faa;
  border-radius: 100vw;
  background-color: #fff;
  background-image: url(../assets/egi-logo-color.svg);
  background-position: 30px 43%;
  background-size: 36px;
  background-repeat: no-repeat;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  font-family: 'DM Sans', sans-serif;
  color: #005faa;
  font-size: 18px;
  font-weight: 700;
}

.button-blue-border:hover {
  background-color: #005faa;
  background-image: url(../assets/egi-logo-white.svg);
  color: #fff;
}

Button Blue background

Approved usages

The following are live previews of the approved usages for the sign up, login and continue with EGI check-in variants.

Sign in with EGI Check-inLogin with EGI Check-inContinue with EGI Check-in
HTML Code
Styling CSS Code

HTML Code

The following HTML code is the base for all blue background buttons. Add one of these on the location you would like to display the button.

<a href="#linkhere" class="button-blue-background">Sign in with EGI Check-in<a>
<a href="#linkhere" class="button-blue-background">Login with EGI Check-in<a>
<a href="#linkhere" class="button-blue-background">Continue with EGI Check-in<a>

Styling CSS Code

The following CSS code is the base for all blue background buttons.

.button-blue-background {
  display: inline-block;
  width: auto;
  margin: 20px 20px 0px 0px;
  padding: 20px 30px 20px 80px;
  border: 2px solid #005faa;
  border-radius: 100vw;
  background-color: #005faa;
  background-image: url(../assets/egi-logo-white.svg);
  background-position: 30px 43%;
  background-size: 36px;
  background-repeat: no-repeat;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.button-blue-background:hover {
  background-color: #fff;
  background-image: url(../assets/egi-logo-color.svg);
  color: #005faa;
}