Une question sur les bouttons html et css

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

8 réponses

  1.  Pierrecastor Modérateur
    Salut

    Si je comprend bien, ce sont des caractères ascii particuliers.
    1. 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
      1. Pierrecastor Modérateur
        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;
        }
    2. 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
      1. Pierrecastor Modérateur
        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.
    3. ivan
      merci

      sino pour les liens qd je mets

      classebouton a

      {

      text-decoration: none;

      }

      il ne veut pas prendre en compte
      1. Pierrecastor Modérateur
        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.
    5. 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
      1. Pierrecastor Modérateur
        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.
    6. 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
      1. Pierrecastor Modérateur
        il faut mettre la couleur que tu veut utilisé. Sois sont nom, sois son code héxa.
    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
      1. Pierrecastor Modérateur
        Justement, les liens de la parti lien donne la liste complète.

    Discussions similaires

    Apache2 accès à autre que /var/www/html/index.html
    merithes

    3 réponses
    indice et exposant en css ?
    yiv

    19 réponses
    Mettre du texte à côté d'une image
    yuls13

    3 réponses
    Faire passer du texte SOUS une image HTML / CSS
    Mihai

    2 réponses
    Superposer du texte sur une image (HTML/CSS)
    bh_france

    1 réponse