Eventival Account login button
The "Continue with Eventival Account" button is to be displayed at welcome pages of websites and applications integrated with Eventival Account authentication method. Clicking at it redirects user to Eventival Account interface and after a successful authentication he is redirected back to the app.
For further details regarding the Eventival Account integration, please contact our support at support@eventival.com.
How to use it
The button can be displayed as an image or a fully coded HTML component.
Image button
If you want to download this button as an image, please check the Downloads section.
HMTL coded button
The coded button is better than the image for several reasons. It allows translation of the text, it saves bandwidth, it scales nicely when zooming in and out and it can be customised.
To use this button at your app you need to copy the following CSS and the small logo image to your server and place the HTML code wherever you want the button to appear on your page.
CSS and small logo image
After moving following CSS code to your app make sure to replace the PATH_TO_THE_LOGO with the actual location of the file. This logo can be downloaded here.
a.ev-login-button {
display: inline-flex;
width: auto;
min-width: 80px;
min-height: 30px;
background: #06b8e7;
border-radius: 3px;
cursor: pointer;
font: 14px/16px Arial;
color: #fff;
text-decoration: none;
box-shadow: 0 2px 0 #ccc;
}
a.ev-login-button::before {
min-height: 40px;
min-width: 40px;
border-radius: 3px 0 0 3px;
content: "";
background: url("PATH_TO_THE_LOGO") center center no-repeat #fff;
background-size: 30px 30px;
}
a.ev-login-button > span {
padding: 12px 25px;
align-self: center;
}
a.ev-login-button:hover {
background-color: #06c1f3;
text-decoration: none;
}HTML
<a class="ev-login-button" href="https://account.eventival.com/auth/realms/Eventival/protocol/openid-connect/auth">
<span>
Continue with Eventival
</span>
</a>