css/button.css

   1 /**
   2  * Chunky 3D Web Buttons
   3  *
   4  * Inspiration was taken from:
   5  * - http://www.premiumpixels.com/freebies/chunky-3d-webbuttons-psd/
   6  */
   7
   8 @font-face {
   9   font-family: 'TizenSansRegular';
  10   src: url('../font/TizenSansRegular.ttf');
  11 }
  12
  13 /**
  14  * Shadow
  15  */
  16 a.button::before {
  17     -webkit-border-radius: 3px;
  18     -moz-border-radius: 3px;
  19     -webkit-box-shadow: #959595 0 2px 5px;
  20     -moz-box-shadow: #959595 0 2px 5px;
  21     border-radius: 3px;
  22     box-shadow: #959595 0 2px 5px;
  23     content: "";
  24     display: block;
  25     height: 100%;
  26     left: 0;
  27     margin: 2px 2px 2px 2px;
  28     padding: 2px 0 0;
  29     position: absolute;
  30     top: 0;
  31     width: 100%; }
  32
  33 a.button:active::before { padding: 1px 0 0; }
  34
  35 /**
  36  * Grey
  37  */
  38 a.button {
  39     -moz-box-shadow: inset 0 0 0 1px #63ad0d;
  40     -webkit-box-shadow: inset 0 0 0 1px #63ad0d;
  41     -moz-border-radius: 3px;
  42     -webkit-border-radius: 3px;
  43     background: #eee;
  44     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));
  45     background: -moz-linear-gradient(#eee, #e2e2e2);
  46     background: linear-gradient(#eee, #e2e2e2);
  47     border: solid 1px #d0d0d0;
  48     border-bottom: solid 3px #b2b1b1;
  49     border-radius: 3px;
  50     box-shadow: inset 0 0 0 1px #f5f5f5;
  51     color: #555;
  52     display: inline-block;
  53     font: bold TizenSansRegular;
  54     /*font: bold 12px Arial, Helvetica, Clean, sans-serif;*/
  55     padding: 10px 10px;
  56     position: relative;
  57     text-align: center;
  58     text-decoration: none;
  59     text-shadow: 0 1px 0 #fafafa; }
  60
  61 a.button:hover {
  62     background: #e4e4e4;
  63     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
  64     background: -moz-linear-gradient(#e4e4e4, #ededed);
  65     background: linear-gradient(#e4e4e4, #ededed);
  66     border: solid 1px #c2c2c2;
  67     border-bottom: solid 3px #b2b1b1;
  68     box-shadow: inset 0 0 0 1px #efefef; }
  69
  70 a.button:active {
  71     background: #dfdfdf;
  72     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));
  73     background: -moz-linear-gradient(#dfdfdf, #e3e3e3);
  74     background: linear-gradient(#dfdfdf, #e3e3e3);
  75     border: solid 1px #959595;
  76     box-shadow: inset 0 10px 15px 0 #c4c4c4;
  77     top:2px;}
  78
  79 /**
  80  * Pink
  81  */
  82 a.button.pink {
  83     background: #f997b0;
  84     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f997b0), to(#f56778));
  85     background: -moz-linear-gradient(#f997b0, #f56778);
  86     background: linear-gradient(#f997b0, #f56778);
  87     border: solid 1px #ee8090;
  88     border-bottom: solid 3px #cb5462;
  89     box-shadow: inset 0 0 0 1px #fbc1d0;
  90     color: #913944;
  91     text-shadow: 0 1px 0 #f9a0ad; }
  92
  93 a.button.pink:hover {
  94     background: #f57184;
  95     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f57184), to(#f78297));
  96     background: -moz-linear-gradient(#f57184, #f78297);
  97     background: linear-gradient(#f57184, #f78297);
  98     border: solid 1px #e26272;
  99     border-bottom: solid 3px #cb5462;
 100     box-shadow: inset 0 0 0 1px #f9aab5; }
 101
 102 a.button.pink:active {
 103     background: #f06a7c;
 104     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f06a7c), to(#f56c7e));
 105     background: -moz-linear-gradient(#f06a7c, #f56c7e);
 106     background: linear-gradient(#f06a7c, #f56c7e);
 107     border: solid 1px #a14753;
 108     box-shadow: inset 0 10px 15px 0 #d45d6d; }
 109
 110 /**
 111  * Blue
 112  */
 113 a.button.blue {
 114     background: #abe4f8;
 115     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#abe4f8), to(#74d0f4));
 116     background: -moz-linear-gradient(#abe4f8, #74d0f4);
 117     background: linear-gradient(#abe4f8, #74d0f4);
 118     border: solid 1px #8cc5d9;
 119     border-bottom: solid 3px #589cb6;
 120     box-shadow: inset 0 0 0 1px #cdeffb;
 121     color: #42788e;
 122     text-shadow: 0 1px 0 #b6e6f9; }
 123
 124 a.button.blue:hover {
 125     background: #80d4f5;
 126     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#80d4f5), to(#92dbf6));
 127     background: -moz-linear-gradient(#80d4f5, #92dbf6);
 128     background: linear-gradient(#80d4f5, #92dbf6);
 129     border: solid 1px #79acbe;
 130     border-bottom: solid 3px #589cb6;
 131     box-shadow: inset 0 0 0 1px #b2e6f8; }
 132
 133 a.button.blue:active {
 134     background: #89d2ee;
 135     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89d2ee), to(#84cae6));
 136     background: -moz-linear-gradient(#89d2ee, #84cae6);
 137     background: linear-gradient(#89d2ee, #84cae6);
 138     border: solid 1px #5c8d9f;
 139     box-shadow: inset 0 10px 15px 0 #79b9d2; }
 140
 141 /**
 142  * Green
 143  */
 144 a.button.green {
 145     background: #cae285;
 146     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#cae285), to(#a3cd5a));
 147     background: -moz-linear-gradient(#cae285, #a3cd5a);
 148     background: linear-gradient(#cae285, #a3cd5a);
 149     border: solid 1px #aad063;
 150     border-bottom: solid 3px #799545;
 151     box-shadow: inset 0 0 0 1px #e0eeb6;
 152     color: #5d7731;
 153     text-shadow: 0 1px 0 #d0e5a4; }
 154
 155 a.button.green:hover {
 156     background: #abd164;
 157     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#abd164), to(#b9d972));
 158     background: -moz-linear-gradient(#abd164, #b9d972);
 159     background: linear-gradient(#abd164, #b9d972);
 160     border: solid 1px #98b85b;
 161     border-bottom: solid 3px #799545;
 162     box-shadow: inset 0 0 0 1px #cce3a1; }
 163
 164 a.button.green:active {
 165     background: #a4cb5d;
 166     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a4cb5d), to(#9ec45a));
 167     background: -moz-linear-gradient(#a4cb5d, #9ec45a);
 168     background: linear-gradient(#a4cb5d, #9ec45a);
 169     border: solid 1px #6e883f;
 170     box-shadow: inset 0 10px 15px 0 #90b352; }
 171
 172 /**
 173  * Teal
 174  */
 175 a.button.teal {
 176     background: #b7f2f4;
 177     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b7f2f4), to(#81e8eb));
 178     background: -moz-linear-gradient(#b7f2f4, #81e8eb);
 179     background: linear-gradient(#b7f2f4, #81e8eb);
 180     border: solid 1px #87d3d5;
 181     border-bottom: solid 3px #4fa7aa;
 182     box-shadow: inset 0 0 0 1px #d4f8f8;
 183     color: #437b7d;
 184     text-shadow: 0 1px 0 #bef3f5; }
 185
 186 a.button.teal:hover {
 187     background: #8deaed;
 188     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));
 189     background: -moz-linear-gradient(#8deaed, #9fedf0);
 190     background: linear-gradient(#8deaed, #9fedf0);
 191     border: solid 1px #79c5c7;
 192     border-bottom: solid 3px #4fa7aa;
 193     box-shadow: inset 0 0 0 1px #b9f2f5; }
 194
 195 a.button.teal:active {
 196     background: #84e4e7;
 197     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#84e4e7), to(#80dcdf));
 198     background: -moz-linear-gradient(#84e4e7, #80dcdf);
 199     background: linear-gradient(#84e4e7, #80dcdf);
 200     border: solid 1px #58999b;
 201     box-shadow: inset 0 10px 15px 0 #75c9cc; }
 202
 203 /**
 204  * Black
 205  */
 206 a.button.black {
 207     background: #656565;
 208     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444));
 209     background: -moz-linear-gradient(#656565, #444);
 210     background: linear-gradient(#656565, #444);
 211     border: solid 1px #535353;
 212     border-bottom: solid 3px #414141;
 213     box-shadow: inset 0 0 0 1px #939393;
 214     color: #fff;
 215     text-shadow: 0 1px 0 #2f2f2f; }
 216
 217 a.button.black:hover {
 218     background: #4c4c4c;
 219     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656));
 220     background: -moz-linear-gradient(#4c4c4c, #565656);
 221     background: linear-gradient(#4c4c4c, #565656);
 222     border: solid 1px #464646;
 223     border-bottom: solid 3px #414141;
 224     box-shadow: inset 0 0 0 1px #818181; }
 225
 226 a.button.black:active {
 227     background: #474747;
 228     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444));
 229     background: -moz-linear-gradient(#474747, #444);
 230     background: linear-gradient(#474747, #444);
 231     border: solid 1px #2f2f2f;
 232     box-shadow: inset 0 10px 15px 0 #3e3e3e; }
 233
 234 /**
 235  * Dark Grey
 236  */
 237 a.button.dark_grey {
 238     background: #d1d1d1;
 239     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(#afafaf));
 240     background: -moz-linear-gradient(#d1d1d1, #afafaf);
 241     background: linear-gradient(#d1d1d1, #afafaf);
 242     border: solid 1px #b4b4b4;
 243     border-bottom: solid 3px #878787;
 244     box-shadow: inset 0 0 0 1px #e3e3e3;
 245     color: #555;
 246     text-shadow: 0 1px 0 #d6d6d6; }
 247
 248 a.button.dark_grey:hover {
 249     background: #b7b7b7;
 250     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b7b7b7), to(#c2c2c2));
 251     background: -moz-linear-gradient(#b7b7b7, #c2c2c2);
 252     background: linear-gradient(#b7b7b7, #c2c2c2);
 253     border: solid 1px #a2a2a2;
 254     border-bottom: solid 3px #878787;
 255     box-shadow: inset 0 0 0 1px #d4d4d4; }
 256
 257 a.button.dark_grey:active {
 258     background: #afafaf;
 259     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#afafaf), to(#a9a9a9));
 260     background: -moz-linear-gradient(#afafaf, #a9a9a9);
 261     background: linear-gradient(#afafaf, #a9a9a9);
 262     border: solid 1px #757575;
 263     box-shadow: inset 0 10px 15px 0 #9a9a9a; }
 264
 265 /**
 266  * Orange
 267  */
 268 a.button.orange {
 269     background: #feda71;
 270     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#feda71), to(#febe4d));
 271     background: -moz-linear-gradient(#feda71, #febe4d);
 272     background: linear-gradient(#feda71, #febe4d);
 273     border: solid 1px #eab551;
 274     border-bottom: solid 3px #b98a37;
 275     box-shadow: inset 0 0 0 1px #fee9aa;
 276     color: #996633;
 277     text-shadow: 0 1px 0 #fedd9b; }
 278
 279 a.button.orange:hover {
 280     background: #fec455;
 281     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fec455), to(#fecd61));
 282     background: -moz-linear-gradient(#fec455, #fecd61);
 283     background: linear-gradient(#fec455, #fecd61);
 284     border: solid 1px #e6a93d;
 285     border-bottom: solid 3px #b98a37;
 286     box-shadow: inset 0 0 0 1px #fedb98; }
 287
 288 a.button.orange:active {
 289     background: #f9bd4f;
 290     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f9bd4f), to(#f0b64d));
 291     background: -moz-linear-gradient(#f9bd4f, #f0b64d);
 292     background: linear-gradient(#f9bd4f, #f0b64d);
 293     border: solid 1px #a77f35;
 294     box-shadow: inset 0 10px 15px 0 #dba646; }
 295
 296 /**
 297  * Purple
 298  */
 299 a.button.purple {
 300     background: #e8c4e4;
 301     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e8c4e4), to(#d698d0));
 302     background: -moz-linear-gradient(#e8c4e4, #d698d0);
 303     background: linear-gradient(#e8c4e4, #d698d0);
 304     border: solid 1px #da9fd4;
 305     border-bottom: solid 3px #946890;
 306     box-shadow: inset 0 0 0 1px #f2dcef;
 307     color: #7b5777;
 308     text-shadow: 0 1px 0 #eacae6; }
 309
 310 a.button.purple:hover {
 311     background: #daa2d4;
 312     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#daa2d4), to(#e0b1db));
 313     background: -moz-linear-gradient(#daa2d4, #e0b1db);
 314     background: linear-gradient(#daa2d4, #e0b1db);
 315     border: solid 1px #ca91c4;
 316     border-bottom: solid 3px #946890;
 317     box-shadow: inset 0 0 0 1px #e9c7e6; }
 318
 319 a.button.purple:active {
 320     background: #d49ace;
 321     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d49ace), to(#cc94c6));
 322     background: -moz-linear-gradient(#d49ace, #cc94c6);
 323     background: linear-gradient(#d49ace, #cc94c6);
 324     border: solid 1px #8e678a;
 325     box-shadow: inset 0 10px 15px 0 #ba87b5; }
 326
 327 /**
 328  * Blue Alt
 329  */
 330 a.button.blue_alt {
 331     background: #becbd6;
 332     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#becbd6), to(#8da5b7));
 333     background: -moz-linear-gradient(#becbd6, #8da5b7);
 334     background: linear-gradient(#becbd6, #8da5b7);
 335     border: solid 1px #a1aeb7;
 336     border-bottom: solid 3px #62727e;
 337     box-shadow: inset 0 0 0 1px #d8e0e6;
 338     color: #515f6a;
 339     text-shadow: 0 1px 0 #c4d0da; }
 340
 341 a.button.blue_alt:hover {
 342     background: #97adbd;
 343     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#97adbd), to(#a8bac8));
 344     background: -moz-linear-gradient(#97adbd, #a8bac8);
 345     background: linear-gradient(#97adbd, #a8bac8);
 346     border: solid 1px #96a2ab;
 347     border-bottom: solid 3px #62727e;
 348     box-shadow: inset 0 0 0 1px #c0ced7; }
 349
 350 a.button.blue_alt:active {
 351     background: #8fa6b6;
 352     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8fa6b6), to(#8aa0b0));
 353     background: -moz-linear-gradient(#8fa6b6, #8aa0b0);
 354     background: linear-gradient(#8fa6b6, #8aa0b0);
 355     border: solid 1px #606f7a;
 356     box-shadow: inset 0 10px 15px 0 #7e92a1; }
 357
 358 /**
 359  * Crisp
 360  */
 361 a.button.crisp {
 362     background: #c38b66;
 363     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c38b66), to(#9d6741));
 364     background: -moz-linear-gradient(#c38b66, #9d6741);
 365     background: linear-gradient(#c38b66, #9d6741);
 366     border: solid 1px #422213;
 367     border-bottom: solid 3px #33180d;
 368     box-shadow: inset 0 0 0 1px #b98c62;
 369     color: #fff;
 370     text-shadow: 0 1px 0 #7b502e; }
 371
 372 a.button.crisp:hover {
 373     background: #9d6741;
 374     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9d6741), to(#c38b66));
 375     background: -moz-linear-gradient(#9d6741, #c38b66);
 376     background: linear-gradient(#9d6741, #c38b66);
 377     border: solid 1px #422213;
 378     border-bottom: solid 3px #33180d;
 379     box-shadow: inset 0 0 0 1px #b98c62; }
 380
 381 a.button.crisp:active {
 382     background: #9d6741;
 383     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9d6741), to(#c38b66));
 384     background: -moz-linear-gradient(#9d6741, #c38b66);
 385     background: linear-gradient(#9d6741, #c38b66);
 386     border: solid 1px #422213;
 387     box-shadow: inset 0 10px 15px 0 #7b502e; }
 388
 389 /**
 390  * Forrst - Special Edition
 391  */
 392 a.button.forrst {
 393     background: #4a7746;
 394     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4a7746), to(#335d30));
 395     background: -moz-linear-gradient(#4a7746, #335d30);
 396     background: linear-gradient(#4a7746, #335d30);
 397     border: solid 1px #1b3013;
 398     border-bottom: solid 3px #0a1608;
 399     box-shadow: inset 0 0 0 1px #53864f;
 400     color: #142413;
 401     text-shadow: 0 1px 0 #4b7b47; }
 402
 403 a.button.forrst:hover {
 404     background: #335d30;
 405     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#335d30), to(#4a7746));
 406     background: -moz-linear-gradient(#335d30, #4a7746);
 407     background: linear-gradient(#335d30, #4a7746);
 408     border: solid 1px #1b3013;
 409     border-bottom: solid 3px #0a1608;
 410     box-shadow: inset 0 0 0 1px #53864f; }
 411
 412 a.button.forrst:active {
 413     background: #335d30;
 414     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#335d30), to(#4a7746));
 415     background: -moz-linear-gradient(#335d30, #4a7746);
 416     background: linear-gradient(#335d30, #4a7746);
 417     border: solid 1px #1b3013;
 418     box-shadow: inset 0 10px 15px 0 #294a16; }
 419
 420 /**
 421  * Dribbble - Special Edition
 422  */
 423 a.button.dribbble {
 424     background: #f1a4c1;
 425     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f1a4c1), to(#e675a0));
 426     background: -moz-linear-gradient(#f1a4c1, #e675a0);
 427     background: linear-gradient(#f1a4c1, #e675a0);
 428     border: solid 1px #e98eb0;
 429     border-bottom: solid 3px #cc4a79;
 430     box-shadow: inset 0 0 0 1px #f6c2d7;
 431     color: #fff;
 432     text-shadow: 0 1px 0 #d64570; }
 433
 434 a.button.dribbble:hover {
 435     background: #e675a0;
 436     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e675a0), to(#f1a4c1));
 437     background: -moz-linear-gradient(#e675a0, #f1a4c1);
 438     background: linear-gradient(#e675a0, #f1a4c1);
 439     border: solid 1px #e98eb0;
 440     border-bottom: solid 3px #cc4a79;
 441     box-shadow: inset 0 0 0 1px #f6c2d7; }
 442
 443 a.button.dribbble:active {
 444     background: #e675a0;
 445     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e675a0), to(#f1a4c1));
 446     background: -moz-linear-gradient(#e675a0, #f1a4c1);
 447     background: linear-gradient(#e675a0, #f1a4c1);
 448     border: solid 1px #e98eb0;
 449     box-shadow: inset 0 10px 15px 0 #e05285; }
 450
 451 /**
 452  * Twitter - Special Edition
 453  */
 454 a.button.twitter {
 455     background: #9fd6fa;
 456     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9fd6fa), to(#6bb9f7));
 457     background: -moz-linear-gradient(#9fd6fa, #6bb9f7);
 458     background: linear-gradient(#9fd6fa, #6bb9f7);
 459     border: solid 1px #72bdf4;
 460     border-bottom: solid 3px #4a9de1;
 461     box-shadow: inset 0 0 0 1px #bfe4fc;
 462     color: #fff;
 463     text-shadow: 0 1px 0 #4598f3; }
 464
 465 a.button.twitter:hover {
 466     background: #6bb9f7;
 467     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#6bb9f7), to(#9fd6fa));
 468     background: -moz-linear-gradient(#6bb9f7, #9fd6fa);
 469     background: linear-gradient(#6bb9f7, #9fd6fa);
 470     border: solid 1px #72bdf4;
 471     border-bottom: solid 3px #4a9de1;
 472     box-shadow: inset 0 0 0 1px #bfe4fc; }
 473
 474 a.button.twitter:active {
 475     background: #6bb9f7;
 476     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#6bb9f7), to(#9fd6fa));
 477     background: -moz-linear-gradient(#6bb9f7, #9fd6fa);
 478     background: linear-gradient(#6bb9f7, #9fd6fa);
 479     border: solid 1px #72bdf4;
 480     box-shadow: inset 0 10px 15px 0 #50aaf3; }
 481
 482 /**
 483  * Facebook - Special Edition
 484  */
 485 a.button.facebook {
 486     background: #99b6df;
 487     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#99b6df), to(#638ec8));
 488     background: -moz-linear-gradient(#99b6df, #638ec8);
 489     background: linear-gradient(#99b6df, #638ec8);
 490     border: solid 1px #6d94ce;
 491     border-bottom: solid 3px #3867ac;
 492     box-shadow: inset 0 0 0 1px #bbcfeb;
 493     color: #fff;
 494     text-shadow: 0 1px 0 #3c61ab; }
 495
 496 a.button.facebook:hover {
 497     background: #638ec8;
 498     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#638ec8), to(#99b6df));
 499     background: -moz-linear-gradient(#638ec8, #99b6df);
 500     background: linear-gradient(#638ec8, #99b6df);
 501     border: solid 1px #6d94ce;
 502     border-bottom: solid 3px #3867ac;
 503     box-shadow: inset 0 0 0 1px #bbcfeb; }
 504
 505 a.button.facebook:active {
 506     background: #638ec8;
 507     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#638ec8), to(#99b6df));
 508     background: -moz-linear-gradient(#638ec8, #99b6df);
 509     background: linear-gradient(#638ec8, #99b6df);
 510     border: solid 1px #6d94ce;
 511     box-shadow: inset 0 10px 15px 0 #4176c4; }
 512
 513 /**
 514  * LoveDSGN - Special Edition
 515  */
 516 a.button.lovedsgn {
 517     background: #f3c1e6;
 518     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f3c1e6), to(#de66c0));
 519     background: -moz-linear-gradient(#f3c1e6, #de66c0);
 520     background: linear-gradient(#f3c1e6, #de66c0);
 521     border: solid 1px #cd5daf;
 522     border-bottom: solid 3px #ce5eb0;
 523     box-shadow: inset 0 0 0 1px #e998d3;
 524     color: #fff;
 525     text-shadow: 0 1px 0 #ce5eb0; }
 526
 527 a.button.lovedsgn:hover {
 528     background: #de66c0;
 529     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#de66c0), to(#f3c1e6));
 530     background: -moz-linear-gradient(#de66c0, #f3c1e6);
 531     background: linear-gradient(#de66c0, #f3c1e6);
 532     border: solid 1px #cd5daf;
 533     border-bottom: solid 3px #ce5eb0;
 534     box-shadow: inset 0 0 0 1px #e998d3; }
 535
 536 a.button.lovedsgn:active {
 537     background: #de66c0;
 538     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#de66c0), to(#f3c1e6));
 539     background: -moz-linear-gradient(#de66c0, #f3c1e6);
 540     background: linear-gradient(#de66c0, #f3c1e6);
 541     border: solid 1px #cd5daf;
 542     box-shadow: inset 0 10px 15px 0 #ce5eb0; }
 543
 544 /**
 545  * XBOX - Special Edition
 546  */
 547 a.button.xbox {
 548     background: #c4e125;
 549     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c4e125), to(#88a819));
 550     background: -moz-linear-gradient(#c4e125, #88a819);
 551     background: linear-gradient(#c4e125, #88a819);
 552     border: solid 1px #829c15;
 553     border-bottom: solid 3px #819d15;
 554     box-shadow: inset 0 0 0 1px #c6da7b;
 555     color: #fff;
 556     text-shadow: 0 1px 0 #819d15; }
 557
 558 a.button.xbox:hover {
 559     background: #88a819;
 560     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#88a819), to(#c4e125));
 561     background: -moz-linear-gradient(#88a819, #c4e125);
 562     background: linear-gradient(#88a819, #c4e125);
 563     border: solid 1px #829c15;
 564     border-bottom: solid 3px #819d15;
 565     box-shadow: inset 0 0 0 1px #c6da7b; }
 566
 567 a.button.xbox:active {
 568     background: #88a819;
 569     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#88a819), to(#c4e125));
 570     background: -moz-linear-gradient(#88a819, #c4e125);
 571     background: linear-gradient(#88a819, #c4e125);
 572     border: solid 1px #829c15;
 573     box-shadow: inset 0 10px 15px 0 #819d15; }
 574
 575 /**
 576  * devART - Special Edition
 577  */
 578 a.button.devart {
 579     background: #729e85;
 580     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#729e85), to(#486d5c));
 581     background: -moz-linear-gradient(#729e85, #486d5c);
 582     background: linear-gradient(#729e85, #486d5c);
 583     border: solid 1px #236036;
 584     border-bottom: solid 3px #225f33;
 585     box-shadow: inset 0 0 0 1px #90a59c;
 586     color: #fff;
 587     text-shadow: 0 1px 0 #225f33; }
 588
 589 a.button.devart:hover {
 590     background: #486d5c;
 591     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#486d5c), to(#729e85));
 592     background: -moz-linear-gradient(#486d5c, #729e85);
 593     background: linear-gradient(#486d5c, #729e85);
 594     border: solid 1px #236036;
 595     border-bottom: solid 3px #225f33;
 596     box-shadow: inset 0 0 0 1px #90a59c; }
 597
 598 a.button.devart:active {
 599     background: #486d5c;
 600     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#486d5c), to(#729e85));
 601     background: -moz-linear-gradient(#486d5c, #729e85);
 602     background: linear-gradient(#486d5c, #729e85);
 603     border: solid 1px #236036;
 604     box-shadow: inset 0 10px 15px 0 #225f33; }
 605
 606 /**
 607  * Designmoo - Special Edition
 608  */
 609 a.button.dsgnmoo {
 610     background: #f97779;
 611     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f97779), to(#ce2424));
 612     background: -moz-linear-gradient(#f97779, #ce2424);
 613     background: linear-gradient(#f97779, #ce2424);
 614     border: solid 1px #be2424;
 615     border-bottom: solid 3px #bd2524;
 616     box-shadow: inset 0 0 0 1px #e67e7b;
 617     color: #fff;
 618     text-shadow: 0 1px 0 #bd2524; }
 619
 620 a.button.dsgnmoo:hover {
 621     background: #ce2424;
 622     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
 623     background: -moz-linear-gradient(#ce2424, #f97779);
 624     background: linear-gradient(#ce2424, #f97779);
 625     border: solid 1px #be2424;
 626     border-bottom: solid 3px #bd2524;
 627     box-shadow: inset 0 0 0 1px #e67e7b; }
 628
 629 a.button.dsgnmoo:active {
 630     background: #ce2424;
 631     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
 632     background: -moz-linear-gradient(#ce2424, #f97779);
 633     background: linear-gradient(#ce2424, #f97779);
 634     border: solid 1px #be2424;
 635     box-shadow: inset 0 10px 15px 0 #bd2524; }
 636
 637 /**
 638  * RSS Feed - Special Edition
 639  */
 640 a.button.rss {
 641     background: #f6c696;
 642     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f6c696), to(#e9893d));
 643     background: -moz-linear-gradient(#f6c696, #e9893d);
 644     background: linear-gradient(#f6c696, #e9893d);
 645     border: solid 1px #a1681b;
 646     border-bottom: solid 3px #a1671d;
 647     box-shadow: inset 0 0 0 1px #f1bb8f;
 648     color: #fff;
 649     text-shadow: 0 1px 0 #a1671d; }
 650
 651 a.button.rss:hover {
 652     background: #e9893d;
 653     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e9893d), to(#f6c696));
 654     background: -moz-linear-gradient(#e9893d, #f6c696);
 655     background: linear-gradient(#e9893d, #f6c696);
 656     border: solid 1px #a1681b;
 657     border-bottom: solid 3px #a1671d;
 658     box-shadow: inset 0 0 0 1px #f1bb8f; }
 659
 660 a.button.rss:active {
 661     background: #e9893d;
 662     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e9893d), to(#f6c696));
 663     background: -moz-linear-gradient(#e9893d, #f6c696);
 664     background: linear-gradient(#e9893d, #f6c696);
 665     border: solid 1px #a1681b;
 666     box-shadow: inset 0 10px 15px 0 #a1671d; }
 667
 668 /**
 669  * Yahoo - Special Edition
 670  */
 671 a.button.yahoo {
 672     background: #be95b7;
 673     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#be95b7), to(#5f396a));
 674     background: -moz-linear-gradient(#be95b7, #5f396a);
 675     background: linear-gradient(#be95b7, #5f396a);
 676     border: solid 1px #4b2a55;
 677     border-bottom: solid 3px #4d2955;
 678     box-shadow: inset 0 0 0 1px #9c83a1;
 679     color: #fff;
 680     text-shadow: 0 1px 0 #4d2955; }
 681
 682 a.button.yahoo:hover {
 683     background: #5f396a;
 684     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5f396a), to(#be95b7));
 685     background: -moz-linear-gradient(#5f396a, #be95b7);
 686     background: linear-gradient(#5f396a, #be95b7);
 687     border: solid 1px #4b2a55;
 688     border-bottom: solid 3px #4d2955;
 689     box-shadow: inset 0 0 0 1px #9c83a1; }
 690
 691 a.button.yahoo:active {
 692     background: #5f396a;
 693     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5f396a), to(#be95b7));
 694     background: -moz-linear-gradient(#5f396a, #be95b7);
 695     background: linear-gradient(#5f396a, #be95b7);
 696     border: solid 1px #4b2a55;
 697     box-shadow: inset 0 10px 15px 0 #4d2955; }
 698