Utilisateur:Grind24/boutons.css

Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;
Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
/* tiré pour essais de https://github.com/wikimedia/agora/blob/master/css/agora.css */

.button {
  display: inline-block;
  padding: 0.4065em 1.2195em 0.4065em;
  font: bold 0.813em Arial, sans-serif;
  line-height: 1;
  color: #252525;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  cursor: pointer;
  background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #f0f0f0, #e6e6e6);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #e6e6e6));
  background-image: -ms-linear-gradient(top, #f0f0f0, #e6e6e6);
  background-image: linear-gradient(#f0f0f0, #e6e6e6);
  background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
  border: 1px #c9c9c9 solid;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0);
}

.button:hover {
  background-color: #f0f0f0;
  background-image: -moz-linear-gradient(top, #f8f8f8, #f0f0f0);
  background-image: -ms-linear-gradient(top, #f8f8f8, #f0f0f0);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #f0f0f0));
  background-image: -webkit-linear-gradient(top, #f8f8f8, #f0f0f0);
  background-image: linear-gradient(#f8f8f8, #f0f0f0);
  border-color: #c9c9c9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0);
}

.button:active {
  background-color: #d8d8d8;
  background-image: -moz-linear-gradient(top, #d3d3d3, #d8d8d8);
  background-image: -ms-linear-gradient(top, #d3d3d3, #d8d8d8);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #d8d8d8));
  background-image: -webkit-linear-gradient(top, #d3d3d3, #d8d8d8);
  background-image: linear-gradient(#d3d3d3, #d8d8d8);
  border-color: #c9c9c9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0);
}

.button:disabled,
.button:disabled.hover,
.button.disabled,
.button.disabled:hover {
  color: #c9c9c9;
  cursor: default;
  background-color: #f0f0f0;
  background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0);
  background-image: -ms-linear-gradient(top, #f0f0f0, #f0f0f0);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #f0f0f0));
  background-image: linear-gradient(#f0f0f0, #f0f0f0);
  background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0);
  border-color: #e3e3e3;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0);
}

.button.red {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #cc0000;
  background-image: -ms-linear-gradient(top, #e42929, #cc0000);
  background-image: -moz-linear-gradient(top, #e42929, #cc0000);
  background-image: linear-gradient(#e42929, #cc0000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e42929), color-stop(100%, #cc0000));
  background-image: -webkit-linear-gradient(top, #e42929, #cc0000);
  border: 1px #ba0101 solid;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e42929', endColorstr='#cc0000', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e42929', endColorstr='#cc0000', GradientType=0);
}

.button.red:hover {
  background-color: #e82b2b;
  background-image: -moz-linear-gradient(top, #ef3838, #e82b2b);
  background-image: -ms-linear-gradient(top, #ef3838, #e82b2b);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ef3838), color-stop(100%, #e82b2b));
  background-image: -webkit-linear-gradient(top, #ef3838, #e82b2b);
  background-image: linear-gradient(#ef3838, #e82b2b);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef3838', endColorstr='#e82b2b', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ef3838', endColorstr='#e82b2b', GradientType=0);
}

.button.red:active {
  background-color: #a70000;
  background-image: -moz-linear-gradient(top, #a70000, #a70000);
  background-image: -ms-linear-gradient(top, #a70000, #a70000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a70000), color-stop(100%, #a70000));
  background-image: -webkit-linear-gradient(top, #a70000, #a70000);
  background-image: linear-gradient(#a70000, #a70000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a70000', endColorstr='#a70000', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#a70000', endColorstr='#a70000', GradientType=0);
}

.button.red:disabled,
.button.red:disabled.hover,
.button.red.disabled,
.button.red.disabled:hover {
  color: white;
  text-shadow: none;
  cursor: default;
  background-color: #eb6f6f;
  background-image: -moz-linear-gradient(top, #eb6f6f, #eb6f6f);
  background-image: -ms-linear-gradient(top, #eb6f6f, #eb6f6f);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb6f6f), color-stop(100%, #eb6f6f));
  background-image: -webkit-linear-gradient(top, #eb6f6f, #eb6f6f);
  background-image: linear-gradient(#eb6f6f, #eb6f6f);
  border-color: #e75959;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb6f6f', endColorstr='#eb6f6f', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#eb6f6f', endColorstr='#eb6f6f', GradientType=0);
}

.button.green {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #008740;
  background-image: -ms-linear-gradient(top, #00974b, #008740);
  background-image: -moz-linear-gradient(top, #00974b, #008740);
  background-image: linear-gradient(#00974b, #008740);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00974b), color-stop(100%, #008740));
  background-image: -webkit-linear-gradient(top, #00974b, #008740);
  border: 1px #0f9b3b solid;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0);
}

.button.green:hover {
  background-color: #119750;
  background-image: -moz-linear-gradient(top, #10a65b, #119750);
  background-image: -ms-linear-gradient(top, #10a65b, #119750);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #10a65b), color-stop(100%, #119750));
  background-image: -webkit-linear-gradient(top, #10a65b, #119750);
  background-image: linear-gradient(#10a65b, #119750);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0);
}

.button.green:active {
  background-color: #007236;
  background-image: -moz-linear-gradient(top, #007236, #007236);
  background-image: -ms-linear-gradient(top, #007236, #007236);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007236), color-stop(100%, #007236));
  background-image: -webkit-linear-gradient(top, #007236, #007236);
  background-image: linear-gradient(#007236, #007236);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0);
}

.button.green:disabled,
.button.green:disabled.hover,
.button.green.disabled,
.button.green.disabled:hover {
  color: white;
  text-shadow: none;
  cursor: default;
  background-color: #2ca368;
  background-image: -moz-linear-gradient(top, #2ca368, #2ca368);
  background-image: -ms-linear-gradient(top, #2ca368, #2ca368);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2ca368), color-stop(100%, #2ca368));
  background-image: -webkit-linear-gradient(top, #2ca368, #2ca368);
  background-image: linear-gradient(#2ca368, #2ca368);
  border-color: #278f5b;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0);
}

.button.blue {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #3366bb;
  background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
  background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
  background-image: linear-gradient(#3670c8, #3366bb);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8), color-stop(100%, #3366bb));
  background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
  border: 1px #33589f solid;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0);
}

.button.blue:hover {
  background-color: #3f77d7;
  background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
  background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da), color-stop(100%, #3f77d7));
  background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
  background-image: linear-gradient(#4c84da, #3f77d7);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0);
}

.button.blue:active {
  background-color: #2a549c;
  background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
  background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9), color-stop(100%, #2a549c));
  background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
  background-image: linear-gradient(#2d5ea9, #2a549c);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0);
}

.button.blue:disabled,
.button.blue:disabled.hover,
.button.blue.disabled,
.button.blue.disabled:hover {
  color: white;
  text-shadow: none;
  cursor: default;
  background-color: #7297d7;
  background-image: -moz-linear-gradient(top, #7297d7, #7297d7);
  background-image: -ms-linear-gradient(top, #7297d7, #7297d7);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7297d7), color-stop(100%, #7297d7));
  background-image: -webkit-linear-gradient(top, #7297d7, #7297d7);
  background-image: linear-gradient(#7297d7, #7297d7);
  border-color: #5e89d1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0)";
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0);
}