Bouton

Résolu
Anthony -  
 Anthony -
Bonjour,
J'ai réalisé ce bouton (http://imageshack.us/a/img163/3191/zcji.jpg) avec Photoshop et j'aimerai le creer en CSS/HTML pour mon site web. Le dégradé rouge est facilement réalisable avec CSS3 ou une image mais le texte avec le contour blanc et le fond transparent je ne sais pas comment faire.
Auriez vous une idée ? Si ce n'est pas possible en CSS, existe t'il une alternative en JS ou Jquery ?
Merci par avance

2 réponses

ElementW Messages postés 4814 Date d'inscription   Statut Contributeur Dernière intervention   1 223
 
Salut, je ne vois pas bien de quel bouton tu parles ("se", sans aucun lien, et mal orthographié en plus). D'après ton message je vois quelque chose comme ceci; j'ai juste?
Envoie une image pour nous montrer sinon...
0
Anthony
 
Oups, tu as raison, j'avais oublié le lien. Le voilà : http://imageshack.us/a/img163/3191/zcji.jpg.
C'est proche de ton image mais je trouve que sa ressemble un peu trop a une ombres, plus qu'un contour. Si il n'y a que cette solution, je veux bien savoir comment faire tout de même.
Merci
0
ElementW Messages postés 4814 Date d'inscription   Statut Contributeur Dernière intervention   1 223
 
Tu as remarqué le problème justement... J'utilise
text-shadow
pour faire ça, car c'est la seule solution utilisable 100% CSS3 pour l'instant; théoriquement la propritété
text-outline
serait parfaitement adaptée a ce cas, mais aucun navigateur ne l'a encore implémentée...
Soit tu attends (peut-être longtemps) pour text-outline, soit tu utilises text-shadow si tu veux une solution CSS3. Il ne me semble pas avoir vu de JS/plugin jQuery qui fasse ça non plus.
On peut quand même tricher en utilisant du SVG, mais c'est pas compatible avec tous les navigateurs:
<svg><text y="80" stroke="white" stroke-width="4px" fill="transparent" font-size="80px">Bouton</text></svg>
0
Anthony
 
Est ce qu'il serai possible d'utiliser la méthode svg mais si celle ci ne fonctionne pas avec le navigateur, on utilise text-shadow ? Comme on fait certaine fois pour IE 8, une sorte "d'arguement facultatif".

Sinon j'uilise text-shadow, le rendu ne me déplait pas non plus
0
Anthony
 
Merci à vous
0