+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : Plug-ins et modules pour MyBB (https://mybb.support/forum-32.html)
+--- Forum : MyCode (https://mybb.support/forum-35.html)
+--- Sujet : Trois boutons (gris, vert, rouge) (/thread-7076.html)
Trois boutons (gris, vert, rouge) - Jules - 26-09-2014
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]