Posted By

robnilas on 01/21/17


Tagged


Versions (?)

btn form mojo dashboard


 / Published in: CSS
 

  1. .btn {
  2. display: inline-block;
  3. *display: inline;
  4. padding: 11px 20px;
  5. margin-bottom: 0;
  6. *margin-left: .3em;
  7. font-size: 14px;
  8. font-weight: bold;
  9. letter-spacing: -1px;
  10. text-align: center;
  11. text-decoration: none;
  12. vertical-align: middle;
  13. cursor: pointer;
  14. *zoom: 1;
  15. color: #888;
  16. -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);
  17. -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);
  18. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);
  19. border: 1px solid #999999;
  20. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  21. background-color: #ffffff;
  22. *background-color: #cccccc;
  23. background-image: -moz-linear-gradient(top, #f5f5f5, #cccccc);
  24. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#cccccc));
  25. background-image: -webkit-linear-gradient(top, #f5f5f5, #cccccc);
  26. background-image: -o-linear-gradient(top, #f5f5f5, #cccccc);
  27. background-image: linear-gradient(to bottom, #f5f5f5, #cccccc);
  28. background-repeat: repeat-x;
  29. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#f5f5f5', endColorstr='#ff#cccccc', GradientType=0);
  30. -webkit-border-radius: 4px;
  31. -moz-border-radius: 4px;
  32. border-radius: 4px;
  33. }
  34. .btn:hover {
  35. background-color: #ffffff;
  36. *background-color: #bfbfbf;
  37. background-image: -moz-linear-gradient(top, #e8e8e8, #bfbfbf);
  38. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e8e8e8), to(#bfbfbf));
  39. background-image: -webkit-linear-gradient(top, #e8e8e8, #bfbfbf);
  40. background-image: -o-linear-gradient(top, #e8e8e8, #bfbfbf);
  41. background-image: linear-gradient(to bottom, #e8e8e8, #bfbfbf);
  42. background-repeat: repeat-x;
  43. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#e8e8e8', endColorstr='#ff#bfbfbf', GradientType=0);
  44. }
  45. .btn-primary {
  46. color: #fff !important;
  47. border: 1px solid #548c00;
  48. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  49. background-color: #90ed00;
  50. *background-color: #71ba00;
  51. background-image: -moz-linear-gradient(top, #71ba00, #71ba00);
  52. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#71ba00), to(#71ba00));
  53. background-image: -webkit-linear-gradient(top, #71ba00, #71ba00);
  54. background-image: -o-linear-gradient(top, #71ba00, #71ba00);
  55. background-image: linear-gradient(to bottom, #71ba00, #71ba00);
  56. background-repeat: repeat-x;
  57. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#71ba00', endColorstr='#ff#71ba00', GradientType=0);
  58. }
  59. .btn-primary:hover {
  60. background-color: #80d300;
  61. *background-color: #62a100;
  62. background-image: -moz-linear-gradient(top, #62a100, #62a100);
  63. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62a100), to(#62a100));
  64. background-image: -webkit-linear-gradient(top, #62a100, #62a100);
  65. background-image: -o-linear-gradient(top, #62a100, #62a100);
  66. background-image: linear-gradient(to bottom, #62a100, #62a100);
  67. background-repeat: repeat-x;
  68. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#62a100', endColorstr='#ff#62a100', GradientType=0);
  69. }
  70. .btn-error {
  71. color: #fff !important;
  72. border: 1px solid #548c00;
  73. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  74. background-color: #ed0000;
  75. *background-color: #ba0000;
  76. background-image: -moz-linear-gradient(top, #ba0000, #ba0000);
  77. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ba0000), to(#ba0000));
  78. background-image: -webkit-linear-gradient(top, #ba0000, #ba0000);
  79. background-image: -o-linear-gradient(top, #ba0000, #ba0000);
  80. background-image: linear-gradient(to bottom, #ba0000, #ba0000);
  81. background-repeat: repeat-x;
  82. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#ba0000', endColorstr='#ff#ba0000', GradientType=0);
  83. }
  84. .btn-error:hover {
  85. background-color: #d30000;
  86. *background-color: #a10000;
  87. background-image: -moz-linear-gradient(top, #a10000, #a10000);
  88. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a10000), to(#a10000));
  89. background-image: -webkit-linear-gradient(top, #a10000, #a10000);
  90. background-image: -o-linear-gradient(top, #a10000, #a10000);
  91. background-image: linear-gradient(to bottom, #a10000, #a10000);
  92. background-repeat: repeat-x;
  93. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#a10000', endColorstr='#ff#a10000', GradientType=0);
  94. }
  95. .btn-mini {
  96. display: block;
  97. line-height: 12px;
  98. }
  99. .btn-margin-top {
  100. margin-top: 5px;
  101. }
  102. .table .complete {
  103. background-color: #E1FCE4;
  104. }
  105. .btn-gray {
  106. color: #525252 !important;
  107. font-weight: bold;
  108. border: 1px solid #bbbbbb;
  109. text-shadow: 0 1px 1px #ffffff;
  110. background-color: #ffffff;
  111. *background-color: #dddddd;
  112. background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
  113. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
  114. background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
  115. background-image: -o-linear-gradient(top, #ffffff, #dddddd);
  116. background-image: linear-gradient(to bottom, #ffffff, #dddddd);
  117. background-repeat: repeat-x;
  118. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#ffffff', endColorstr='#ff#dddddd', GradientType=0);
  119. }
  120. .btn-gray:hover {
  121. background-color: #ffffff;
  122. *background-color: #c3c3c3;
  123. background-image: -moz-linear-gradient(top, #e5e5e5, #c3c3c3);
  124. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e5e5), to(#c3c3c3));
  125. background-image: -webkit-linear-gradient(top, #e5e5e5, #c3c3c3);
  126. background-image: -o-linear-gradient(top, #e5e5e5, #c3c3c3);
  127. background-image: linear-gradient(to bottom, #e5e5e5, #c3c3c3);
  128. background-repeat: repeat-x;
  129. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff#e5e5e5', endColorstr='#ff#c3c3c3', GradientType=0);
  130. }
  131. .btn-auto-size {
  132. display: block !important;
  133. }
  134. .btn-group {
  135. *zoom: 1;
  136. }
  137. .btn-group:before,
  138. .btn-group:after {
  139. content: "";
  140. display: table;
  141. }
  142. .btn-group:after {
  143. clear: both;
  144. }
  145. .btn-group .start,
  146. .btn-group .end,
  147. .btn-group .inside {
  148. float: left;
  149. }
  150. .btn-group .start .btn {
  151. -webkit-border-radius: 4px 0 0 4px;
  152. -moz-border-radius: 4px 0 0 4px;
  153. border-radius: 4px 0 0 4px;
  154. border-right-width: 0;
  155. }
  156. .btn-group .end .btn {
  157. -webkit-border-radius: 0 4px 4px 0;
  158. -moz-border-radius: 0 4px 4px 0;
  159. border-radius: 0 4px 4px 0;
  160. border-left-width: 0;
  161. }
  162. .btn-group .inside .btn {
  163. -webkit-border-radius: 0;
  164. -moz-border-radius: 0;
  165. border-radius: 0;
  166. }
  167. .btn-group.btn-group-2 .end .btn {
  168. border-left-width: 1px;
  169. }

Report this snippet  

You need to login to post a comment.