From mycopedia
(Difference between revisions)
(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> |