Créer un bouton affichant un texte/image/lien etc (façon F.A.Q)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

vous pouvez sans javascript créer un bouton qui affichera un contenu au passage
du curseur de la souris hinhin .
Un peu comme ceci:

Goggle Chrome


Une nouvelle version de Google Chrome est disponible en mise à jour,
La procédure:
Cliquez sur la clé en haut à droite puis à propos de Google Chrome,
La nouvelle version se téléchargera et le navigateur vous demandera de redémarrer le navigateur.
Le lien direct pour une première installation:
https://www.google.com/chrome?hl=fr


La procédure est simple les ami(e)s hinhin .

Tout d'abord il vous faudra bien comprendre que l'affichage peut être différent
sur un topic ou dans une page web.
Il faudra alors jouer sur deux valeurs clin oeil .
Les valeurs qui devront être paramétrées sont notifiées dans la feuille de style clin oeil .

Tu veux la même apparence?
Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Colle ceci:

Code:

.bloc  /* correspond au bloc complet*/
{
display: block;
overflow: hidden;
width: 600px; /* largeur du bloc*/
height: 44px; /* hauteur du bouton*/
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.bloc_ferme /* correspond au bouton*/

{
background-color:#121212;
display: inline-block;
height:25px;
width:100px;
padding: 2px;
font: smallcaps  13px arial;
text-align: center;
color: #20aec8;
  -webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
border:1px solid #20aec8;
}
.bloc:hover /* correspond à l'ouverture du bloc*/
{
height: 210px;
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.bloc_ouvert /* correspond à l'affichage du contenu */
{
  background: url(http://r29.imgfast.net/users/3413/73/38/67/smiles/831888.gif)no-repeat center center;
background-color:#141414;
display: inline-block;
width: auto;
font: 12px arial;
text-align: justify;
padding: 4px;
padding-left:5px;
padding-right:5px;
margin-top: 0;
color: #20aec8;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;
border:1px solid #20aec8;
border-top:none;
}
.bloc_ouvert a /* correspond à la couleur de lien dans le contenu*/

{color: #ffffff;}
/* fin bloc message*/

Le code H.T.M.L :
Code:

<div class="bloc">
<p class="bloc_ferme">Le titre du bouton</p>
<div class="bloc_ouvert">
Le texte /Image/Lien bref tout de que vous voulez
</div></div>
coucou


Dernière édition par Milouze14 le Sam 29 Sep 2012 - 8:29, édité 1 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,
petite erreur dans la css, corrigée ce jour clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum