Une question sur les bouttons html et css

ivan -
Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention - 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

Afficher la suite

A voir également:

Une question sur les bouttons html et css
Editeur html - Télécharger - HTML
Word html - Télécharger - Bureautique
Css download - Télécharger - HTML
Comment mettre un texte sur une image css - Forum CSS
Lier html et css - Forum HTML

8 réponses

Réponse 1 / 8
Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215

Salut

Si je comprend bien, ce sont des caractères ascii particuliers.
0
Réponse 2 / 8
ivan

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
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  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

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
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  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

merci

sino pour les liens qd je mets

classebouton a

{

text-decoration: none;

}

il ne veut pas prendre en compte
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  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

ivan

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

Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215

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

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
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  il faut mettre la couleur que tu veut utilisé. Sois sont nom, sois son code héxa.
  
  0
Réponse 7 / 8
ivan

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
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Oui, ici :
  
  https://paulund.developpez.com/tutoriels/css/boutons-icones-sans-images/#LXII
  
  0
Réponse 8 / 8
ivan

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
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Justement, les liens de la parti lien donne la liste complète.
  
  0

Une question sur les bouttons html et css

8 réponses

Discussions similaires

Newsletters