Voici comment réaliser un bouton de retour type Iphone sans aucune image et en css3.
Ce type bouton ayant pour cible les webapps des téléphone embarquant un navigateur webkit , il ne sont pas combatible avec d’autre navigateur. Il reste cependant ttrès simple d’ajouter les règles css propre à chaque navigateur.
Etape 1 forme générale
Commençons par une structure simple :
<div class="back-btn">
<a href="#">Retour</a>
</div>
en ajoutant un peu de css à tout ceci
div.back-btn {
position:absolute;
text-shadow:none;
height: 34px;
min-width: 45px;
width:auto;
padding: 0 4px 0 4px;
top:4px;
left:16px;
color:#fff;
background: -webkit-gradient(linear, left top, left bottom, from(#849cbb), to(#4a6c9b),
color-stop(50%, #849cbb)
);
-webkit-border-radius: 5px;
border:1px solid #384963;
}
div.back-btn a {
position:relative;
display:block;
min-width: 45px;
width:auto;
height:34px;
z-index: 100;
font-size: 10pt;
padding:0;
color:#fff;
line-height: 33px;
text-decoration: none;
}
On obtient un semblant de bouton. Vous remarquerez l’utilisation des propriétés de dégradé de couleur plutôt que d’utiliser une image.
Notre bouton prend forme mais il lui manque tout de même la partie pointue, la flèche :
Etape 2 : La pointe
Pour obtenir la pointe nous allons profiter des propriétés de transformation du CSS3. L’idée générale étant d’utiliser un div que l’on fait pivoter de 45° pour que l’angle de la boite puisse servir de pointe.
On rajoute donc un div à notre structure html , qui devient :
<div class="back-btn">
<a href="#">Retour</a>
<div></div>
</div>
Il nous reste ensuite à mettre en forme ce div supplémentaire :
div.back-btn div {
position: absolute;
width: 24px;
height: 24px;
-webkit-transform: rotate(45deg);
top: 5px;
left: -11px;
background: -webkit-gradient(linear, left top, right bottom, from(#849cbb), to(#4a6c9b),
color-stop(50%, #849cbb)
);
-webkit-border-radius: 3px;
border-bottom:1px solid #384963;
border-left:1px solid #384963;
}