Bouton de connexion
Pôle emploi met à disposition un bouton de connexion décliné en deux couleurs : blanc et bleu.
Deux types d'implémentation sont proposés :
- HTML (avec Bootstrap et sans)
- SVG
Télécharger le zip contenant les feuilles de styles, les images et les exemples.
Version HTML avec Bootstrap
Librairies requises :
Feuille de style à insérer
<link href="pe-connect_html-bootstrap.css" rel="stylesheet">
Code HTML du bouton
<div class="pe-connect">
<a href="#" class="button-pe-connect is-blue" data-toggle="tooltip" data-placement="bottom" title="">
<img class="icon-pe-connect" src="icon-pe-connect-is-white.svg" alt="" width="34" height="31" />
<span class="text">Se connecter avec pôle emploi</span>
</a>
</div>
Pour afficher le tooltip au survol du bouton
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
Version HTML sans Bootstrap
Feuille de style à insérer
<link href="pe-connect_html.css" rel="stylesheet">
Code HTML du bouton
<div class="pe-connect">
<a href="#" class="button-pe-connect is-blue" data-toggle="tooltip" data-placement="bottom" title="">
<img class="icon-pe-connect" src="icon-pe-connect-is-white.svg" alt="" width="34" height="31" />
<span class="text">Se connecter avec pôle emploi</span>
</a>
</div>
Version SVG
Feuille de style à insérer
<link href="pe-connect_svg.css" rel="stylesheet">
Code HTML du bouton
<div class="pe-connect">
<a href="#" class="button-pe-connect" title="">
<img class="icon-pe-connect" src="pe-connect-barre-nav-b.svg" alt="" width="300" height="75" />
<img class="icon-pe-connect-hover" src="pe-connect-barre-nav-b-o.svg" alt="" width="300" height="75" />
</a>
</div>