Bouton

Résolu/Fermé

Anthony - Modifié par Anthony le 4/12/2013 à 22:50
Anthony - 7 déc. 2013 à 10:25

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

A voir également:

Bouton
Réinitialiser chromecast sans bouton - Guide
Bouton reinitialisation pc - Guide
Comment débloquer un bouton enfoncé - Forum Samsung
Hard reset samsung sans bouton home - Guide
Thunderbird bouton envoyer disparu ✓ - Forum Thunderbird

2 réponses

Réponse 1 / 2

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
4 déc. 2013 à 22:43

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...

Réponse 2 / 2

Anthony
4 déc. 2013 à 22:55

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

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
4 déc. 2013 à 23:05

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>

Anthony
5 déc. 2013 à 18:43

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

Anthony
7 déc. 2013 à 10:25

Merci à vous

Discussions similaires

Quel est la touche shift sur le clavier

ou est la touche shift sur un clavier

symbole arrêt marche

Arrêt/démarrage via Bouton ON/OFF de l'alim

Touche "home" sur pc portable.