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.  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+
    1. 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...
      2. 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)
        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+
        6. 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 ?
          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. 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. 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. 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
                  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 :)
                  1. 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. 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. 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);
                      }

                      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