Des boutons en full CSS pour votre site.

Boutons avec du texte.

Principe.

Une partie du texte du lien est masqué. On peut répéter plusieurs fois le masque, pour conserver uniquement les lettres qui apparaîtront sur le bouton.

<a href="#">Hello<span> world</span>!</a>

span {
  display: none;
}

Exemples.

Boutons avec un icone.

Principe.

On utilise le même masque que précédemment pour le texte du lien. Le lien est précédé d’un icone (qui se trouvera à l’intérieur du bouton lors du rendu).

Note : voici une liste d’icones Unicode.

<a href="#"><span>Hello world!</span></a>

span {
  display: none;
}
a::before {
  content: "Hello!";
}

Exemples.