Problème boutton/image CSS

Résolu
antoinegdln4 -  
Bonjour,
Je cherche à transformer une image - icone en .png en boutton css interactif (avec un a:active, un a:hover).. Comment le faire ?
Car si je définis l'image en background ou background image, à part me la mettre en background, il ne fait rien.
Je cherche en gros à adapter la forme de l'image en un bouton CSS.
Merci d'avance de vos réponses.

17 réponses

  1.  salim_1305
    tu peux essayé cela
    html
    <div id="bouton" <a href="url">Link text</a>><div>
    #bouton{
    widht:50px;/* exemple*/
    height:30px;
    background: url(image01) no-repeat center;
    }
    #bouton:hover{
    background: url(image02);
    }
    #bouton:active{
    backgroud: url(image03);
    }
    1. antoinegdln4
      Ca marche pas comme je veux.. En fait je voudrais un bouton de la forme de l'imaga..
      1. RAD ZONE Contributeur
        Salut 
        je voudrais un bouton de la forme de l'image
        .
        heuuu l image a part carree ou rectangle , quelle forme crois tu qu elle a ????

        a+
    2. antoinegdln4
      Bon je vais être plus précis !
      Je voudrais faire un bouton en forme de boule de Noel, avec le CSS.. Ya pas n moyen via une image ?
      1. Nhay
        En gros, tu aimerai qu'on ne puissent pas cliquer autour de ta boule c'est ça ?
        Si c'est tout rond, tu peut tenter un border-radius (Et un display:block sur le lien si ton image est en background + height/width de dimension)

        Si je fais fausse route, dit-le, j'suis pas certain d'avoir tout compris :)
        2. antoinegdln4
          C'est à peu près ça, mais il existe pas en moyen en CSS (ou en JS ?) de faire un bouton soigneux, en forme de boule de Noel ? :)
          1. Nhay
            Pour un bouton de formulaire, tu a l'input type image
            <input type='image' src='/img/image.jpg' alt='' />
            Ou encore la balise button
            <button type='submit'><img src='' alt='' /></button>
            1. RAD ZONE Contributeur
              Si tu peux faire ca avec 
               
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
     background: url(ton-image.png);
      display: block;


              exemple 
              <!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">

    body{
      margin: 0;
      padding: 0;
      background-color: #333333;
    }

    #centre{
      width: 257px;
      margin: auto;
    }
          /* CSS DU A */
    a.rond {
      width: 255px;
      height: 255px;
      border: 1px solid #333;
      background-color: #ffffff;
      -webkit-border-radius: 150px;
      -moz-border-radius: 150px;
      border-radius: 150px;
      background: url(ton-image.png);
      display: block;
    }
         /* CSS DU A */
    </style>
  </head>
  <body>
    <div id="centre">
      <a href="#" class="rond"></a>
    </div>
  </body>
</html>


              voila l image que tu met a background: url(ton-image.png);


              a+
              1. antoinegdln4
                Je te remercie beaucoup, ça ressemble à peu près à ce que je veux, mais à encore quelques détails près... .. Il s'agit encore "d'un bloc", sur lequel on doit cliquer dessus... N'y a t il pas moyen que l'on clique juste sur la boule, et qu'il n'y ai plus de bloc carré ? Puisque l'image.png est une icone, donc sans fond.. Donc ça devrait être possible non ?
                1. RAD ZONE Contributeur
                  mais c est toujours un bloc !! ton image n est pas sans fond , mais a un fond transparent ce qui donne cette impression de rond !!
                  et bien pour imager ont peux dire que le border radius a 150px sur les 4 angles fait un peu la meme chose avec le block <a> !

                  tu peux aussi le faire avec un mapping, et la tu clique sur une area shape ronde,
                  je vois pas trop l interet pour un seul lien ,
                  mais c est faisable !

                  meme exemple que au dessus mais avec un mapping 

                  <!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">

    body{
      margin: 0;
      padding: 0;
      background-color: #333333;
    }

    #centre{
      width: 257px;
      margin: auto;
    }

    </style>
  </head>
  <body>
    <div id="centre">
      <img alt="image" usemap="#image-rond" src="image-rond.png">
      <map id="image-rond" name="image-rond">
        <area alt="lien" href="#" shape="circle" coords="134,127,125">
      </map>
    </div>
  </body>
</html>


                  a+
              2. antoinegdln4
                D'accord, merci beaucoup :)
                Je t'explique beaucoup plus précisemment mon projet :
                Bien qu'on soit le 06 décembre je cherche à créer un calendrier de l'avent, avec des boutons en forme de boules de Noel, avec une png à fond transparent, et que, quand on clique dessus, le ":active" fonctionne normalement lorsque l'on clique dessus, et quel lorsque l'on la survole, le ":hover" la fasse changer de couleur (la boule de Noel). Est ce possible ?
                3. antoinegdln4
                  Après test sur ton fichier, deux questions :
                  De un comment faire pour mettre du texte par dessus l'image ?
                  De deux, après avoir viré le tableau et toutes les images, je n'en ai laissé qu'une, est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
                  1. RAD ZONE Contributeur 
                    comment faire pour mettre du texte par dessus l'image ?

                    dans tes liens <a> tu met ton texte dans un <p> 
                    <a href="#" class="rond"><p>TEXT</p></a>


                    ensuite dans le CSS
                    a a.rond tu ajoute 
                     
line-height: 122px; 
text-decoration: none;/* pour enlever la ligne sous le texte du lien  */


                    et tu ajoute cette regle CSS 
                    a.rond p {
      vertical-align: middle;
      display: inline;
      color: #FF0000;/* tu choisira ta couleur */ 
      font-weight: bolder;/* tu choisira  */ 
    }


                    après avoir viré le tableau
                    ?? quel tableau ?? tout est fait en div ! 

                    est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
                    ???
                    c est que tu as due laisser la div cal et son css !

                    tu est sur de comprendre un peu le html css ??? j ai de gros doutes !

                    a+
                5. antoinegdln4
                  Pourquoi, après avoir tapé le code comme ça :
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <title>
                  RAD ZONE Webcreation
                  </title>
                  <meta charset="utf-8">
                  <style type="text/css">
                  <!--

                  a.rond {

                  width: 122px;
                  height: 122px;
                  display: block;
                  border-radius:150px;
                  background: url(2.png);
                  }
                  a.rond2 {
                  left:120px;
                  width: 122px;
                  height: 122px;
                  display: inline-block;
                  border-radius:150px;
                  background: url(2.png);
                  }

                  a:hover {
                  background: url(transfertlogoombresq2_122x122.png);
                  }

                  a:active {
                  background: url(trempty_122x122.png);
                  }

                  </style>
                  </head>
                  <body>

                  <a href="#" class="rond" ></a>
                  <a href="#" class="rond2" ></a>

                  </body>
                  </html>

                  Il m'affiche les images les unes en dessous des autres ? (enfin les deux seules images)
                  2. antoinegdln4
                    Non mais je débute pas à ce point là...
                    J'aurais juste aimé que tu me dise ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
                    1. RAD ZONE Contributeur 
                      ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
                      .

                      mais c est les bases que tu ne comprend pas !!
                      sinon tu saurait qu il suffit de mettre 
                      display: inline-block;

                      a la place de 
                      display: block;
                      a a.rond pour que tout s aligne ! 

                      Non mais je débute pas à ce point là...
                      revise un peu quand meme ,en CSS si tu n a pas un minimum de base tu va galerer a chaque changement dans ton code et comme dans cet exemple (difference entre block et inline-block) et passer des heures sur un probleme , alors que 10 secondes suffisent pour le corriger si tu a les bases !!

                      a+

                      Discussions similaires

                      Retrouver l'image originale d'une photo modifiée
                      Raven

                      10 réponses
                      Comment recadrer une image avec Inkscape
                      infofeet

                      13 réponses