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

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 */
}

Neptunia
+ Hyperactif +

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

http://www.planet-series.com/
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

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



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.

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

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

Neptunia
+ Hyperactif +

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

http://www.planet-series.com/
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.

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

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. ^^

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.

Neptunia
+ Hyperactif +

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

http://www.planet-series.com/
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 ?

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.

Neptunia
+ Hyperactif +

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

http://www.planet-series.com/
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...

-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

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

-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/

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 ...

-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