Trois boutons (gris, vert, rouge)

[Jules]

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]