Bouton de connexion

Pôle emploi met à disposition un bouton de connexion décliné en deux couleurs : blanc et bleu.

boutons_peconnect.png


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>