Réaliser ce bouton .

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

Résolu Réaliser ce bouton .

Message par Xoomi34 le Ven 11 Avr 2014 - 12:17

Bonjour/Bonsoir membre de ForumActif .
J'aimerai savoir comment je pourrai réaliser ce genre de bouton :
Que l'ont peut retrouver sur http://www.forumactif.com/
Merci
Cordialement


Dernière édition par Xoomi34 le Dim 13 Avr 2014 - 12:18, édité 1 fois
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Neptunia le Ven 11 Avr 2014 - 12:45

Bonjour !

Un div auquel on attribue un identifiant et ensuite un peu de css
Code:
.identifiant {
width: xpx; /* Largeur en pixels */
height: ypx; /* Hauteur en pixels */
background-cplor: #FF0000 /* Fond rouge */
color: #FFFFFF /* Texte blanc */
}
avatar

Neptunia
Membre actif

Féminin
Messages : 11917
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Ven 11 Avr 2014 - 13:25

Merci, mais pouvez-vous me donner le code HTML . ^^
Et dans le code CSS, je ne vois pas de code qui fait que le bouton doit s'éclaircir Smile
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Pizza Boi le Ven 11 Avr 2014 - 16:07

Salut Very Happy

Ceci est juste un exemple que je ne peux pas vous donner les regards officielles de code FM, désolé Sad.

Code:
<div id="cfor">Create a Forum</div>

^ Ajoutez à cela dans une région qui accepte HTML.

Code:
#cfor {
  background: #F00;
  padding: 5px 5px 5px 5px;
  border: 1px solid #000;
  width: #px;
  height: #px;
}

^ Ajouter ce dans le CSS. Vous pouvez changer le style librement ce que vous voulez. Aussi n'oubliez pas de changer la valeur de px # Smile.

Cordialament,
Pizza Boi


avatar

Pizza Boi
*

Messages : 34
Inscrit(e) le : 11/04/2014

http://ygoda.forumtl.com/
Pizza Boi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Ven 11 Avr 2014 - 17:02

Merci quand même. ^^
Mais ce n'est pas encore cela.
Il manque au survol l'éclaircicement et les coins arrondis.
Et j'ai étudié la page.
Le code HTML pour ceci est <a class="btn btn-danger btn-lg" href="/creer-un-forum/phpbb3"> Créer un forum </a>
Mais quand au code CSS .
Il y en a trop.
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Pizza Boi le Ven 11 Avr 2014 - 17:43

Salut Very Happy

Vous devez ajouter à ce code si vous voulez coins arrondis:

Code:
border: 1px solid #color;
border-radius: #px #px #px #px;

N'oubliez pas de changer la valeur # px et la valeur de couleur #.

Cordialament,
Pizza Boi
avatar

Pizza Boi
*

Messages : 34
Inscrit(e) le : 11/04/2014

http://ygoda.forumtl.com/
Pizza Boi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Neptunia le Ven 11 Avr 2014 - 17:48

@Xoomi34 a écrit:Mais quand au code CSS .
Il y en a trop.

C'est l'inverse, il n'y en a pas assez

Pour l'état survolé du bouton
Code:
.identifiant:hover {
attribut1: valeur;
attribut1: valeur;
...;
attributN: valeur;
}

Pour les arrondis, il faut utiliser l'attribut border-radius
avatar

Neptunia
Membre actif

Féminin
Messages : 11917
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Ven 11 Avr 2014 - 19:34

Code:
.identifiant:hover {
attribut1: valeur;
attribut1: valeur;
...;
attributN: valeur;
  border: 1px solid #FF0000;
border-radius: 5px 5px 5px 5px;
width: 10px; /* Largeur en pixels */
height: 50px; /* Hauteur en pixels */
background-cplor: #FF0000 /* Fond rouge */
color: #FFFFFF /* Texte blanc */
}
Et en code HTML:
Code:
<a href="#">
<div id="identifiant">Create a Forum
</div><a href="#"></a>
Sa ne marche pas.
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Pizza Boi le Ven 11 Avr 2014 - 19:43

Salut Very Happy

Vous devez modifier cette partie et cette partie: 'attribut' & valeur

Également modifier ce .identifiant:hover à ce #identifiant:hover

Enfin, vous devez d'abord déclarer un non-stationnaire #identifiant.

Cordialament,
Pizza Boi
avatar

Pizza Boi
*

Messages : 34
Inscrit(e) le : 11/04/2014

http://ygoda.forumtl.com/
Pizza Boi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Sam 12 Avr 2014 - 9:13

On pourrait donner le code, car je ne comprend pas très bien. ^^
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Neptunia le Sam 12 Avr 2014 - 9:30

Non, ici c'est un forum d'entraide (à ne pas confondre avec un forum de codage). On vous indique comment faire, mais le code c'est à vous de le produire.

On vous a donné des exemples de code pour le bouton normal hier à 12h45 et à 16h07.
Pour l'état survolé du bouton c'est le même fonctionnement.

Vous remplacez attribut1 etc par des attributs CSS comme color, width ou border-radius.
Et valeur par ce que l'attribut attend. Un attribut width demandera une taille (en px par exemple), un attribut color attend un code couleur et ainsi de suite.
avatar

Neptunia
Membre actif

Féminin
Messages : 11917
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Sam 12 Avr 2014 - 13:59

Ce que je voulais plutôt dire, c'est que par quoi je dois remplacer attribut et valeur ?
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Neptunia le Sam 12 Avr 2014 - 14:25

@Xoomi34 a écrit:Ce que je voulais plutôt dire, c'est que par quoi je dois remplacer attribut et valeur ?

J'avais répondu dans le message précédent :

Vous remplacez attribut1 etc par des attributs CSS comme color, width ou border-radius.
Et valeur par ce que l'attribut attend. Un attribut width demandera une taille (en px par exemple), un attribut color attend un code couleur et ainsi de suite.
avatar

Neptunia
Membre actif

Féminin
Messages : 11917
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Réaliser ce bouton .

Message par -Tancrède- le Dim 13 Avr 2014 - 9:19

Alors en reprenant les codes ci-dessus
HTML :
Code:
<div id="cfor">Créer un Forum</div>

CSS :
Code:
               #cfor {
        border-radius: 5px 5px 5px 5px;
        width: 150px; /* Largeur en pixels */
        height: 50px; /* Hauteur en pixels */
        background-color: #E9553C; /* Fond rouge pale*/
        color: #FFFFFF; /* Texte blanc */
        transition: all 0.2s ease-in-out;/* Effet de fondu au passage de la souris */
    text-align: center;
                }
        
       #cfor:hover {
        background-color: #FF0000 /* Fond rouge pétant */
                }

Après rien ne t’empêche de le bidouiller un peu Wink

/!\ Ce code contient du CSS3 (la transition) qui n'est pas supporté par tout les navigateurs, il sera simplement ignoré par certains...
avatar

-Tancrède-
****

Masculin
Messages : 449
Inscrit(e) le : 14/05/2012

http://projet-ecle.forumactif.org/?tt=1
-Tancrède- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Dim 13 Avr 2014 - 12:11

Merci beaucoup . Smile
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par -Tancrède- le Dim 13 Avr 2014 - 12:20

Attends, après vérification, un lien sur une div, c'est pas possible, mais sur un span en block ca fonctionne, essaie donc ça plutôt :
Code:
<a href="LIEN" ><span id="cfor">Créer un Forum</span></a>
et
Code:
       #cfor {
            display: block;
        border-radius: 5px 5px 5px 5px;
        width: 150px !important; /* Largeur en pixels */
        height: 50px!important; /* Hauteur en pixels */
        background-color: #E9553C; /* Fond rouge */
        color: #FFFFFF; /* Texte blanc */
        transition: all 0.2s ease-in-out;/* Effet de fondu au passage de la souris */
    text-align: center;
    text-decoration: none!important;
                }
Désolé de m'être trompé  Razz


Dernière édition par -Tancrède- le Dim 13 Avr 2014 - 12:28, édité 1 fois
avatar

-Tancrède-
****

Masculin
Messages : 449
Inscrit(e) le : 14/05/2012

http://projet-ecle.forumactif.org/?tt=1
-Tancrède- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par Xoomi34 le Dim 13 Avr 2014 - 12:28

Sa marche . Smile
http://xoomi.forumgratuit.be/
avatar

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réaliser ce bouton .

Message par -Tancrède- le Dim 13 Avr 2014 - 14:45

j'ai édité mon message ...
avatar

-Tancrède-
****

Masculin
Messages : 449
Inscrit(e) le : 14/05/2012

http://projet-ecle.forumactif.org/?tt=1
-Tancrède- a été remercié(e) par l'auteur de ce sujet.

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


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