Archives de catégorie : HTML5 / CSS3

Bouton type iphone CSS3

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;
}

Voir le résultat final