Une question sur les bouttons html et css

ivan - 18 févr. 2014 à 10:04
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 - 19 févr. 2014 à 13:07
Bonjour,

juste une question sur les boutton sans image

http://paulund.developpez.com/tutoriels/css/boutons-icones-sans-images/

comment il fait pour afficher un crayon ou les symbole sil n'y a pas les image

merci

A voir également:

8 réponses

Réponse 1 / 8
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 10:11
Salut

Si je comprend bien, ce sont des caractères ascii particuliers.
0
Réponse 2 / 8
ivan
18 févr. 2014 à 10:23
ca maide pas ta réponse ou c'est moi qui ne comprend pas

sinon j'ai une autre question

sur mon css

a:hover
{
text-decoration: underline;
color:#44C8F5; /* couleur du texte */
}


donc le lien du boutton vs souligner comment je fait pour supprimr les souligner juste su r les boutton et non sur le site
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 10:30
ca maide pas ta réponse ou c'est moi qui ne comprend pas

Heu, j'essaye de t'aider, hein. Si tu me disait ce que tu ne comprend pas dans ma réponse, ça serais plus simple.

Par contre, merci de faire un effort de rédaction, je veut bien aider, mais si je suis obliger de déchiffrer tes messages, ça va être moins facile.

Pour ta seconde question, si j'ai bien compris, tu veux des liens soulignés sauf dans les boutons ?

Si c'est bien ça, il faut que tu donnes une class à tes boutons, puis que tu ajoutes dans le css :


.classebouton a
{
text-decoration: none;
}
0
Réponse 3 / 8
ivan
18 févr. 2014 à 10:39
merci pour les liens

sinon pour l'image du crayon ou editer etc..

es ce qu'on peut modifier ou as du tout si c'est possible
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 10:42
Justement, ce que je veut dire, c'est que ce ne sont pas des images, mais des caractère, comme les lettres ou les chiffres, qui ont leur propre code dans la table des caractère ascii ou utf8


Donc non, je ne pense pas que ça sois modifiable.
0
Réponse 4 / 8
ivan
18 févr. 2014 à 10:48
merci

sino pour les liens qd je mets

classebouton a

{

text-decoration: none;

}

il ne veut pas prendre en compte
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 10:49
Tu as bien donner une class appelée classbouton (ou n'importe quoi, comme tu veux) dans le html ?

Et en CSS, y'a un point avant une class.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
ivan
18 févr. 2014 à 11:00
oui j'ai mis 

<!DOCTYPE html>
<html>
<head>
    <title>Just some other awesome CSS3 buttons - demo</title>
    <meta charset="utf-8">
    <style>
.button
{        
	display: inline-block;
	white-space: nowrap;
	background-color: #ccc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background-image: -webkit-linear-gradient(top, #eee, #ccc);
	background-image: -moz-linear-gradient(top, #eee, #ccc);
	background-image: -ms-linear-gradient(top, #eee, #ccc);
	background-image: -o-linear-gradient(top, #eee, #ccc);
	background-image: linear-gradient(top, #eee, #ccc);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
	border: 1px solid #777;
	padding: 0 1.5em;
	margin: 0.5em;
	font: bold 1em/2em Arial, Helvetica;
	text-decoration: none;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
	background-color: #ddd;        
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
	background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
	background-image: -moz-linear-gradient(top, #fafafa, #ddd);
	background-image: -ms-linear-gradient(top, #fafafa, #ddd);
	background-image: -o-linear-gradient(top, #fafafa, #ddd);
	background-image: linear-gradient(top, #fafafa, #ddd);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}

.button:active
{
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	position: relative;
	top: 1px;
}

.classebouton a

{

text-decoration: none;

}

.button:focus
{
	outline: 0;
	background: #fafafa;
}    

.button:before
{
	background: #ccc;
	background: rgba(0,0,0,.1);
	float: left;        
	width: 1em;
	text-align: center;
	font-size: 1.5em;
	margin: 0 1em 0 -1em;
	padding: 0 .2em;
	-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-moz-border-radius: .15em 0 0 .15em;
	-webkit-border-radius: .15em 0 0 .15em;
	border-radius: .15em 0 0 .15em;
        pointer-events: none;        
}

/* Hexadecimal entities for the icons */
.news_sujet:before
{
	content: "\271A";
}

.add:before
{
	content: "\271A";
}

.edit:before
{
	content: "\270E";        
}

.delete:before
{
	content: "\2718";        
}

.save:before
{
	content: "\2714";        
}

.email:before
{
	content: "\2709";        
}

.like:before
{
	content: "\2764";        
}

.next:before
{
	content: "\279C";
}

.star:before
{
	content: "\2605";
}

.spark:before
{
	content: "\2737";
}

.play:before
{
	content: "\25B6";
} 



.revenir_haut:before
{
	content: "\25B6";
} 

.repondre_sujet:before
{
	content: "\25B6";
} 


.resolu:before
{
	content: "\25B6";
} 

.non_resolu:before
{
	content: "\25B6";
} 

.suivre_discution:before
{
	content: "\25B6";
} 

.annuler_discution:before
{
	content: "\25B6";
} 

.verouiller_topic:before
{
	content: "\25B6";
} 

.deverouiller_topic:before
{
	content: "\25B6";
} 
.signaler_admin:before
{
	content: "\25B6";
} 

.poster:before
{
	content: "\25B6";
} 


.envoyer_reponse:before
{
	content: "\25B6";
} 

.previsulation:before
{
	content: "\25B6";
} 
.selectionner_deselectionner:before
{
	content: "\25B6";
} 
.supprimer_message:before
{
	content: "\25B6";
} 
.repondre:before
{
	content: "\25B6";
} 

   </style>
</head>

<body>

<br><br>

<h2>Actions</h2>
<a href="" class="classebouton button repondre">R?pondre</a>
<a href="" class="button envoyer_reponse">Envoyer la r?ponse</a>
<a href="" class="button previsulation">Pr?visulation</a>
<a href="" class="button poster">poster</a>
<a href="" class="button news_sujet">Nouveau Sujet</a>
<a href="" class="button repondre_sujet">Repondre au Sujet</a>
<a href="" class="button revenir_haut">Revenir En Haut</a>
<a href="" class="button resolu">R?solu ?</a>
<a href="" class="button non_resolu">Non r?solu</a>
<a href="" class="button suivre_discution">Suivre cette discution</a>
<a href="" class="button suivre_discution">Annuler cette discution</a>
<a href="" class="button verouiller_topic">Verrouiller le topic</a>
<a href="" class="button deverouiller_topic">D?verouiller le topic</a>
<a href="" class="button signaler_admin">Signaler ce sujet aux admin</a>
<a href="" class="button revenir_haut">Revenir En Haut</a>
<a href="" class="button add">Add</a>
<a href="" class="button edit">Edit</a>
<a href="" class="button delete">Delete</a>
<a href="" class="button save">Save</a>
<a href="" class="button email">Send email</a>
<a href="" class="button selectionner_deselectionner">Tout s?lectionner/D?selectioner</a>
<a href="" class="button supprimer_message">Supprimer les messages s?lectionn?s</a>

<br><br>


merci
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 11:09
Bon, déjà, la class qu'il faut que tu utilise, c'est donc button, vu que c'est la classe de tout tes bouton. Pas la peine de rajouter une nouvelle class qui fera doublon.

Je pense que tu devrais trouver des exercices pour mieux comprendre le fonctionnement des CSS.
0
Réponse 6 / 8
ivan
18 févr. 2014 à 11:35
je les trouver donc soulignement c'est bon

mais la couleur du lien je ne trouve pas

j'ai pensé meyttre

color: none

mais ca ne marche pas
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
18 févr. 2014 à 11:42
il faut mettre la couleur que tu veut utilisé. Sois sont nom, sois son code héxa.
0
Réponse 7 / 8
ivan
19 févr. 2014 à 11:50
juste ue question je ne trouve pas les caractere hexa

es ce qu'il y a un site ou il y a tout les affichage crayon etc... au lieu du forum develope
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
19 févr. 2014 à 11:53
Oui, ici :

https://paulund.developpez.com/tutoriels/css/boutons-icones-sans-images/#LXII
0
Réponse 8 / 8
ivan
19 févr. 2014 à 12:00
oui je l'ai

mais je cherche s'il y a d'autre lien a part celui là

sinon je cherche une icone pour dire citation
0
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
19 févr. 2014 à 13:07
Justement, les liens de la parti lien donne la liste complète.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses