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. 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.
  3. 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.
  4. 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
    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.
  7. 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.
  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
    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;
      }
  9. Pierrecastor Modérateur
    Salut

    Si je comprend bien, ce sont des caractères ascii particuliers.

    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