1. IMPORTANT : Nouvelles mesures de sécurité - 2. Règles pour obtenir de l'aide dans les forums de support - 3. Restrictions des droits pour le groupe "Support suspendu"

Il est obligatoire de respecter les Règles de MyBB.fr : Version abrégée ou Version complète pour obtenir du support sur nos forums.

Les membres ayant un site/forum contrevenant aux règles de MyBB.support seront placés dans le groupe "Support suspendu" et ne bénéficieront plus du support du staff. Nous recommandons aux autres membres d'agir de même. Il ne s'agit pas d'un bannissement, le membre retrouvera son statut "normal" dès que sa situation sera conforme aux règles.

Nouveau : un Wiki en français : plus de détails.
Avant de soumettre votre problème, consultez-le, ainsi que la FAQ, sans oublier le moteur de recherche interne.


Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Trois boutons (gris, vert, rouge)
Mots-clés » heaven, trois, boutons, gris, vert, rouge
26-09-2014, 21:49, (Modification du message : 28-09-2014, 20:34 par Jules.)
#1
Trois boutons (gris, vert, rouge)
Coucou, je viens vous partager trois boutons que je me suis amusé à faire avec le site http://www.cssbuttongenerator.com/ !

Alors, voilà l'aperçu des boutons : http://jsfiddle.net/julesam2/ch6gehbk/

Maintenant, insérez dans votre template "global.css" (Administration > Templates & Style > Thèmes > Votre thème > Global.css > Éditer en mode avancé) :
Code :
.bouton_vert {
    -moz-box-shadow:inset 0px 1px 0px 1px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 1px #caefab;
    box-shadow:inset 0px 1px 0px 1px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -webkit-border-top-left-radius:42px;
    -moz-border-radius-topleft:42px;
    border-top-left-radius:42px;
    -webkit-border-top-right-radius:42px;
    -moz-border-radius-topright:42px;
    border-top-right-radius:42px;
    -webkit-border-bottom-right-radius:42px;
    -moz-border-radius-bottomright:42px;
    border-bottom-right-radius:42px;
    -webkit-border-bottom-left-radius:42px;
    -moz-border-radius-bottomleft:42px;
    border-bottom-left-radius:42px;
    text-indent:10px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:Trebuchet MS;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:200px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #aade7c;
}
.bouton_vert:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}.bouton_vert:active {
    position:relative;
    top:1px;
}

.bouton_rouge {
    -moz-box-shadow:inset 0px 1px 0px 1px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 1px #f29c93;
    box-shadow:inset 0px 1px 0px 1px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -webkit-border-top-left-radius:42px;
    -moz-border-radius-topleft:42px;
    border-top-left-radius:42px;
    -webkit-border-top-right-radius:42px;
    -moz-border-radius-topright:42px;
    border-top-right-radius:42px;
    -webkit-border-bottom-right-radius:42px;
    -moz-border-radius-bottomright:42px;
    border-bottom-right-radius:42px;
    -webkit-border-bottom-left-radius:42px;
    -moz-border-radius-bottomleft:42px;
    border-bottom-left-radius:42px;
    text-indent:10px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:Trebuchet MS;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:200px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #b23e35;
}
.bouton_rouge:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
}.bouton_rouge:active {
    position:relative;
    top:1px;
}

.defaut {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:auto;
margin: 10px;
padding: 10px;
min-width: 100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
}
.defaut:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.defaut:active {
    position:relative;
    top:1px;
}

Et ensuite, allez dans votre administration, configuration, mycode et ajouter les mycodes avec les options suivantes :

Bouton vert:
Expression : \[bouton1="(.*?)"\](.*?)\[/bouton1\]
Remplacement : <a href="$1" class="bouton_vert">$2</a>

Bouton rouge:
Expression : \[bouton2="(.*?)"\](.*?)\[/bouton2\]
Remplacement : <a href="$1" class="bouton_rouge">$2</a>

Bouton gris:
Expression : \[boutond="(.*?)"\](.*?)\[/boutond\]
Remplacement : <a href="$1" class="defaut">$2</a>

Pour l'utilisation :
- Bouton vert : [bouton1="lien"]Texte[/bouton1]
- Bouton rouge : [bouton2="lien"]Texte[/bouton2]
- Bouton gris : [boutond="lien"]Texte[/boutond]

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre




Utilisateur(s) parcourant ce sujet : 2 visiteur(s)

Contact | MyBB.support | Retourner en haut | Retourner au contenu | Version bas-débit (Archivé) | Syndication RSS
 Utilitaire de traduction fourni par Regentronique