MyBB.support, le portail francophone de MyBB

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]

Jules