From mycopedia

(Difference between revisions)
Jump to: navigation, search
(Created page with "<html><head> <style type="text/css"> .button_black{ border:1px solid #b7b7b7; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica...")
 
 
Line 21: Line 21:
 
  background-image: linear-gradient(to bottom, #bababa, #575757);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#bababa, endColorstr=#575757);
 
  background-image: linear-gradient(to bottom, #bababa, #575757);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#bababa, endColorstr=#575757);
 
}
 
}
 +
 +
.button_red{
 +
border:1px solid #6e1300; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 4px 7px 0px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #A61C00;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#A61C00), to(#6d0019));
 +
background-image: -webkit-linear-gradient(top, #A61C00, #6d0019);
 +
background-image: -moz-linear-gradient(top, #A61C00, #6d0019);
 +
background-image: -ms-linear-gradient(top, #A61C00, #6d0019);
 +
background-image: -o-linear-gradient(top, #A61C00, #6d0019);
 +
background-image: linear-gradient(to bottom, #A61C00, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#A61C00, endColorstr=#6d0019);
 +
}
 +
 +
.button_red:hover{
 +
border:1px solid #400b00; background-color: #731300;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#731300), top(#3a000d));
 +
background-image: -webkit-linear-gradient(top, #731300, #3a000d);
 +
background-image: -moz-linear-gradient(top, #731300, #3a000d);
 +
background-image: -ms-linear-gradient(top, #731300, #3a000d);
 +
background-image: -o-linear-gradient(top, #731300, #3a000d);
 +
background-image: linear-gradient(to bottom, #731300, #3a000d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#731300, endColorstr=#3a000d);
 +
}
 +
 +
.button_brown{
 +
border:1px solid #7c5b2b; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 4px 7px 0px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a67939;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#a67939), to(#845108));
 +
background-image: -webkit-linear-gradient(top, #a67939, #845108);
 +
background-image: -moz-linear-gradient(top, #a67939, #845108);
 +
background-image: -ms-linear-gradient(top, #a67939, #845108);
 +
background-image: -o-linear-gradient(top, #a67939, #845108);
 +
background-image: linear-gradient(to bottom, #a67939, #845108);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a67939, endColorstr=#845108);
 +
}
 +
 +
.button_brown:hover{
 +
border:1px solid #5a421f; background-color: #805d2c;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#805d2c), top(#543305));
 +
background-image: -webkit-linear-gradient(top, #805d2c, #543305);
 +
background-image: -moz-linear-gradient(top, #805d2c, #543305);
 +
background-image: -ms-linear-gradient(top, #805d2c, #543305);
 +
background-image: -o-linear-gradient(top, #805d2c, #543305);
 +
background-image: linear-gradient(to bottom, #805d2c, #543305);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#805d2c, endColorstr=#543305);
 +
}
 +
 +
.button_blue{
 +
border:1px solid #495267; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 5px 4px 7px 0px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #606c88;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
 +
background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
 +
background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
 +
background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
 +
background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
 +
background-image: linear-gradient(to bottom, #606c88, #3f4c6b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
 +
}
 +
 +
.button_blue:hover{
 +
border:1px solid #363d4c; background-color: #4b546a;
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#4b546a), top(#2c354b));
 +
background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
 +
background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
 +
background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
 +
background-image: -o-linear-gradient(top, #4b546a, #2c354b);
 +
background-image: linear-gradient(to bottom, #4b546a, #2c354b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
 +
}
 +
 +
 
</style></head>
 
</style></head>
 
<body>
 
<body>
  
 
<form> <input type="button" class="button_black" style="width:100%;" value="PREVIEW BUTTON" /> </form>
 
<form> <input type="button" class="button_black" style="width:100%;" value="PREVIEW BUTTON" /> </form>
 +
<form> <input type="button" class="button_brown" style="width:100%;" value="PREVIEW BUTTON" /> </form>
 +
<form> <input type="button" class="button_red" style="width:100%;" value="PREVIEW BUTTON" /> </form>
 +
<form> <input type="button" class="button_blue" style="width:100%;" value="PREVIEW BUTTON" /> </form>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 13:34, 15 March 2013