EGI Check-in button configuration for Developers

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 the EGI Check-in service.

Assets

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

EGI Logo colored

format: svg file

Right click this file and select download.

EGI Logo white

format: svg file

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.

Button code — Blue border

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

.button-blue-border {
  margin: 20px 20px 0px 0px;
  padding: 20px 30px 20px 80px;
  border-style: solid;
  border-width: 2px;
  border-color: #005faa;
  border-radius: 100vw;
  background-color: #fff;
  background-image: url(https://assets.website-files.com/62e3a5b…/62e3a82…_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(https://assets.website-files.com/62e3a5b…/62e3a82…_egi-logo-white.svg);
  color: #fff;
}

Approved usages

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

EGI Check-in buttons white

Button code — Blue background

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

.button-blue-background {
margin: 20px 20px 0px 0px;
padding: 20px 30px 20px 80px;
border-style: solid;
border-width: 2px;
border-color: #005faa;
border-radius: 100vw;
background-color: #005faa;
background-image: url(https://assets.website-files.com/62e3a5b…/62e3a82…_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(https://assets.website-files.com/62e3a5b…/62e3a82…_egi-logo-color.svg);
color: #005faa;
}

Approved usages

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

EGI Check-in buttons blue

EGI Check-in button configuration for Developers

Assets

Typeface format: google fonts or local

Button code — Blue border

Approved usages

Button code — Blue background

Approved usages

Typeface
format: google fonts or local