×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

[SpecialPaint] Gradient Buttons in a flash.css

0
0
 
0
Language: CSS
Posted by: Wantoi OestKnut
Added: Jul 1, 2018 1:16 PM
Views: 3257
Tags: basic buttons css minimal stylesheet supercharged
  1. .button{
  2.     display:inline-block;
  3.     zoom:1;
  4.     *display:inline;
  5.     vertical-align:baseline;
  6.     margin:0 2px;
  7.     outline:0;
  8.     cursor:pointer;
  9.     text-align:center;
  10.     text-decoration:none;
  11.     padding:.5em 2em .55em;
  12.     text-shadow:0 1px 1px rgba(0,0,0,.3);
  13.     -webkit-border-radius:.5em;
  14.     -moz-border-radius:.5em;
  15.     border-radius:.5em;
  16.     -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  17.     -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
  18.     box-shadow:0 1px 2px rgba(0,0,0,.2)
  19. }
  20. .button:hover{
  21.     text-decoration:none
  22. }
  23. .button:active{
  24.     position:relative;
  25.     top:1px
  26. }
  27. .bigrounded{
  28.     -webkit-border-radius:2em;
  29.     -moz-border-radius:2em;
  30.     border-radius:2em
  31. }
  32. .medium{
  33.     font-size:12px;
  34.     padding:.4em 1.5em .42em
  35. }
  36. .small{
  37.     font-size:11px;
  38.     padding:.2em 1em .275em
  39. }
  40. .black{
  41.     color:#d7d7d7;
  42.     border:solid 1px #333;
  43.     background:#333;
  44.     background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#000));
  45.     background:-moz-linear-gradient(top,#666,#000);
  46.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000')
  47. }
  48. .black:hover{
  49.     background:#000;
  50.     background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#000));
  51.     background:-moz-linear-gradient(top,#444,#000);
  52.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000')
  53. }
  54. .black:active{
  55.     color:#666;
  56.     background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#444));
  57.     background:-moz-linear-gradient(top,#000,#444);
  58.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666')
  59. }
  60. .gray{
  61.     color:#e9e9e9;
  62.     border:solid 1px #555;
  63.     background:#6e6e6e;
  64.     background:-webkit-gradient(linear,left top,left bottom,from(#888),to(#575757));
  65.     background:-moz-linear-gradient(top,#888,#575757);
  66.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757')
  67. }
  68. .gray:hover{
  69.     background:#616161;
  70.     background:-webkit-gradient(linear,left top,left bottom,from(#757575),to(#4b4b4b));
  71.     background:-moz-linear-gradient(top,#757575,#4b4b4b);
  72.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b')
  73. }
  74. .gray:active{
  75.     color:#afafaf;
  76.     background:-webkit-gradient(linear,left top,left bottom,from(#575757),to(#888));
  77.     background:-moz-linear-gradient(top,#575757,#888);
  78.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888')
  79. }
  80. .white{
  81.     color:#606060;
  82.     border:solid 1px #b7b7b7;
  83.     background:#fff;
  84.     background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ededed));
  85.     background:-moz-linear-gradient(top,#fff,#ededed);
  86.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed')
  87. }
  88. .white:hover{
  89.     background:#ededed;
  90.     background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#dcdcdc));
  91.     background:-moz-linear-gradient(top,#fff,#dcdcdc);
  92.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc')
  93. }
  94. .white:active{
  95.     color:#999;
  96.     background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff));
  97.     background:-moz-linear-gradient(top,#ededed,#fff);
  98.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff')
  99. }
  100. .orange{
  101.     color:#fef4e9;
  102.     border:solid 1px #da7c0c;
  103.     background:#f78d1d;
  104.     background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
  105.     background:-moz-linear-gradient(top,#faa51a,#f47a20);
  106.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20')
  107. }
  108. .orange:hover{
  109.     background:#f47c20;
  110.     background:-webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));
  111.     background:-moz-linear-gradient(top,#f88e11,#f06015);
  112.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015')
  113. }
  114. .orange:active{
  115.     color:#fcd3a5;
  116.     background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));
  117.     background:-moz-linear-gradient(top,#f47a20,#faa51a);
  118.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a')
  119. }
  120. .red{
  121.     color:#faddde;
  122.     border:solid 1px #980c10;
  123.     background:#d81b21;
  124.     background:-webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#aa1317));
  125.     background:-moz-linear-gradient(top,#ed1c24,#aa1317);
  126.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317')
  127. }
  128. .red:hover{
  129.     background:#b61318;
  130.     background:-webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));
  131.     background:-moz-linear-gradient(top,#c9151b,#a11115);
  132.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115')
  133. }
  134. .red:active{
  135.     color:#de898c;
  136.     background:-webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));
  137.     background:-moz-linear-gradient(top,#aa1317,#ed1c24);
  138.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24')
  139. }
  140. .blue{
  141.     color:#d9eef7;
  142.     border:solid 1px #0076a3;
  143.     background:#0095cd;
  144.     background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));
  145.     background:-moz-linear-gradient(top,#00adee,#0078a5);
  146.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5')
  147. }
  148. .blue:hover{
  149.     background:#007ead;
  150.     background:-webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));
  151.     background:-moz-linear-gradient(top,#0095cc,#00678e);
  152.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e')
  153. }
  154. .blue:active{
  155.     color:#80bed6;
  156.     background:-webkit-gradient(linear,left top,left bottom,from(#0078a5),to(#00adee));
  157.     background:-moz-linear-gradient(top,#0078a5,#00adee);
  158.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee')
  159. }
  160. .rosy{
  161.     color:#fae7e9;
  162.     border:solid 1px #b73948;
  163.     background:#da5867;
  164.     background:-webkit-gradient(linear,left top,left bottom,from(#f16c7c),to(#bf404f));
  165.     background:-moz-linear-gradient(top,#f16c7c,#bf404f);
  166.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f')
  167. }
  168. .rosy:hover{
  169.     background:#ba4b58;
  170.     background:-webkit-gradient(linear,left top,left bottom,from(#cf5d6a),to(#a53845));
  171.     background:-moz-linear-gradient(top,#cf5d6a,#a53845);
  172.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845')
  173. }
  174. .rosy:active{
  175.     color:#dca4ab;
  176.     background:-webkit-gradient(linear,left top,left bottom,from(#bf404f),to(#f16c7c));
  177.     background:-moz-linear-gradient(top,#bf404f,#f16c7c);
  178.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c')
  179. }
  180. .green{
  181.     color:#e8f0de;
  182.     border:solid 1px #538312;
  183.     background:#64991e;
  184.     background:-webkit-gradient(linear,left top,left bottom,from(#7db72f),to(#4e7d0e));
  185.     background:-moz-linear-gradient(top,#7db72f,#4e7d0e);
  186.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e')
  187. }
  188. .green:hover{
  189.     background:#538018;
  190.     background:-webkit-gradient(linear,left top,left bottom,from(#6b9d28),to(#436b0c));
  191.     background:-moz-linear-gradient(top,#6b9d28,#436b0c);
  192.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c')
  193. }
  194. .green:active{
  195.     color:#a9c08c;
  196.     background:-webkit-gradient(linear,left top,left bottom,from(#4e7d0e),to(#7db72f));
  197.     background:-moz-linear-gradient(top,#4e7d0e,#7db72f);
  198.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f')
  199. }
  200. .pink{
  201.     color:#feeef5;
  202.     border:solid 1px #d2729e;
  203.     background:#f895c2;
  204.     background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));
  205.     background:-moz-linear-gradient(top,#feb1d3,#f171ab);
  206.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab')
  207. }
  208. .pink:hover{
  209.     background:#d57ea5;
  210.     background:-webkit-gradient(linear,left top,left bottom,from(#f4aacb),to(#e86ca4));
  211.     background:-moz-linear-gradient(top,#f4aacb,#e86ca4);
  212.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4')
  213. }
  214. .pink:active{
  215.     color:#f3c3d9;
  216.     background:-webkit-gradient(linear,left top,left bottom,from(#f171ab),to(#feb1d3));
  217.     background:-moz-linear-gradient(top,#f171ab,#feb1d3);
  218.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3')
  219. }

Write a comment

To post comments, please log in or register.