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 Blue Border
- HTML
- 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>
Approved Usages
The following are static previews of the approved usages for the sign up, login and continue with EGI check-in variants.
Button Blue Background
- HTML
- 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>
Approved Usages
The following are static previews of the approved usages for the sign up, login and continue with EGI check-in variants.