Réaliser ce bouton .

[Xoomi34]

Bonjour/Bonsoir membre de ForumActif .
J'aimerai savoir comment je pourrai réaliser ce genre de bouton :

Que l'ont peut retrouver sur https://www.forumactif.com/
Merci
Cordialement

[Neptunia]

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

[Xoomi34]

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

[Pizza Boi]

Salut

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

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

Cordialament,
Pizza Boi

[Xoomi34]

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.

[Pizza Boi]

Salut

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

[Neptunia]

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

[Xoomi34]

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.

[Pizza Boi]

Salut

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

[Xoomi34]

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

[Neptunia]

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.

[Xoomi34]

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

[Neptunia]

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.

[-Tancrède-]

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

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

[Xoomi34]

Merci beaucoup .

[-Tancrède-]

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é  

[Xoomi34]

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

[-Tancrède-]

j'ai édité mon message ...