Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <button class="button" type="button">My Button</button>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$start-color: red;

// Also try with this:
// $start-color: #004011;

.button {
  width: 100px;
  height: 50px;
  -webkit-animation: colorwheel 5s infinite;
  background: $start-color;
  color: white;
  background: $start-color;
  border: 1px solid rgba(0,0,0,0.08);
}

@-webkit-keyframes colorwheel {
  $degrees: 360;
  @for $deg from 0 through $degrees {
    #{$deg * 0.3333%} {
      background: adjust-hue($start-color, $deg);
    }
  }
}

SassMeister-output.css

.button {
  width: 100px;
  height: 50px;
  -webkit-animation: colorwheel 5s infinite;
  background: red;
  color: white;
  background: red;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

@-webkit-keyframes colorwheel {
  0% {
    background: red;
  }
  0.3333% {
    background: #ff0400;
  }
  0.6666% {
    background: #ff0900;
  }
  0.9999% {
    background: #ff0d00;
  }
  1.3332% {
    background: #ff1100;
  }
  1.6665% {
    background: #ff1500;
  }
  1.9998% {
    background: #ff1a00;
  }
  2.3331% {
    background: #ff1e00;
  }
  2.6664% {
    background: #ff2200;
  }
  2.9997% {
    background: #ff2600;
  }
  3.333% {
    background: #ff2b00;
  }
  3.6663% {
    background: #ff2f00;
  }
  3.9996% {
    background: #ff3300;
  }
  4.3329% {
    background: #ff3700;
  }
  4.6662% {
    background: #ff3c00;
  }
  4.9995% {
    background: #ff4000;
  }
  5.3328% {
    background: #ff4400;
  }
  5.6661% {
    background: #ff4800;
  }
  5.9994% {
    background: #ff4d00;
  }
  6.3327% {
    background: #ff5100;
  }
  6.666% {
    background: #ff5500;
  }
  6.9993% {
    background: #ff5900;
  }
  7.3326% {
    background: #ff5e00;
  }
  7.6659% {
    background: #ff6200;
  }
  7.9992% {
    background: #ff6600;
  }
  8.3325% {
    background: #ff6a00;
  }
  8.6658% {
    background: #ff6e00;
  }
  8.9991% {
    background: #ff7300;
  }
  9.3324% {
    background: #ff7700;
  }
  9.6657% {
    background: #ff7b00;
  }
  9.999% {
    background: #ff8000;
  }
  10.3323% {
    background: #ff8400;
  }
  10.6656% {
    background: #ff8800;
  }
  10.9989% {
    background: darkorange;
  }
  11.3322% {
    background: #ff9100;
  }
  11.6655% {
    background: #ff9500;
  }
  11.9988% {
    background: #ff9900;
  }
  12.3321% {
    background: #ff9d00;
  }
  12.6654% {
    background: #ffa200;
  }
  12.9987% {
    background: #ffa600;
  }
  13.332% {
    background: #ffaa00;
  }
  13.6653% {
    background: #ffae00;
  }
  13.9986% {
    background: #ffb300;
  }
  14.3319% {
    background: #ffb700;
  }
  14.6652% {
    background: #ffbb00;
  }
  14.9985% {
    background: #ffbf00;
  }
  15.3318% {
    background: #ffc300;
  }
  15.6651% {
    background: #ffc800;
  }
  15.9984% {
    background: #ffcc00;
  }
  16.3317% {
    background: #ffd000;
  }
  16.665% {
    background: #ffd500;
  }
  16.9983% {
    background: #ffd900;
  }
  17.3316% {
    background: #ffdd00;
  }
  17.6649% {
    background: #ffe100;
  }
  17.9982% {
    background: #ffe500;
  }
  18.3315% {
    background: #ffea00;
  }
  18.6648% {
    background: #ffee00;
  }
  18.9981% {
    background: #fff200;
  }
  19.3314% {
    background: #fff700;
  }
  19.6647% {
    background: #fffb00;
  }
  19.998% {
    background: yellow;
  }
  20.3313% {
    background: #fbff00;
  }
  20.6646% {
    background: #f6ff00;
  }
  20.9979% {
    background: #f2ff00;
  }
  21.3312% {
    background: #eeff00;
  }
  21.6645% {
    background: #eaff00;
  }
  21.9978% {
    background: #e6ff00;
  }
  22.3311% {
    background: #e1ff00;
  }
  22.6644% {
    background: #ddff00;
  }
  22.9977% {
    background: #d9ff00;
  }
  23.331% {
    background: #d4ff00;
  }
  23.6643% {
    background: #d0ff00;
  }
  23.9976% {
    background: #ccff00;
  }
  24.3309% {
    background: #c8ff00;
  }
  24.6642% {
    background: #c3ff00;
  }
  24.9975% {
    background: #bfff00;
  }
  25.3308% {
    background: #bbff00;
  }
  25.6641% {
    background: #b7ff00;
  }
  25.9974% {
    background: #b2ff00;
  }
  26.3307% {
    background: #aeff00;
  }
  26.664% {
    background: #aaff00;
  }
  26.9973% {
    background: #a6ff00;
  }
  27.3306% {
    background: #a1ff00;
  }
  27.6639% {
    background: #9dff00;
  }
  27.9972% {
    background: #99ff00;
  }
  28.3305% {
    background: #95ff00;
  }
  28.6638% {
    background: #91ff00;
  }
  28.9971% {
    background: #8cff00;
  }
  29.3304% {
    background: #88ff00;
  }
  29.6637% {
    background: #84ff00;
  }
  29.997% {
    background: #80ff00;
  }
  30.3303% {
    background: #7bff00;
  }
  30.6636% {
    background: #77ff00;
  }
  30.9969% {
    background: #73ff00;
  }
  31.3302% {
    background: #6eff00;
  }
  31.6635% {
    background: #6aff00;
  }
  31.9968% {
    background: #66ff00;
  }
  32.3301% {
    background: #62ff00;
  }
  32.6634% {
    background: #5eff00;
  }
  32.9967% {
    background: #59ff00;
  }
  33.33% {
    background: #55ff00;
  }
  33.6633% {
    background: #51ff00;
  }
  33.9966% {
    background: #4cff00;
  }
  34.3299% {
    background: #48ff00;
  }
  34.6632% {
    background: #44ff00;
  }
  34.9965% {
    background: #40ff00;
  }
  35.3298% {
    background: #3bff00;
  }
  35.6631% {
    background: #37ff00;
  }
  35.9964% {
    background: #33ff00;
  }
  36.3297% {
    background: #2fff00;
  }
  36.663% {
    background: #2bff00;
  }
  36.9963% {
    background: #26ff00;
  }
  37.3296% {
    background: #22ff00;
  }
  37.6629% {
    background: #1eff00;
  }
  37.9962% {
    background: #1aff00;
  }
  38.3295% {
    background: #15ff00;
  }
  38.6628% {
    background: #11ff00;
  }
  38.9961% {
    background: #0dff00;
  }
  39.3294% {
    background: #08ff00;
  }
  39.6627% {
    background: #04ff00;
  }
  39.996% {
    background: lime;
  }
  40.3293% {
    background: #00ff04;
  }
  40.6626% {
    background: #00ff09;
  }
  40.9959% {
    background: #00ff0d;
  }
  41.3292% {
    background: #00ff11;
  }
  41.6625% {
    background: #00ff15;
  }
  41.9958% {
    background: #00ff19;
  }
  42.3291% {
    background: #00ff1e;
  }
  42.6624% {
    background: #00ff22;
  }
  42.9957% {
    background: #00ff26;
  }
  43.329% {
    background: #00ff2b;
  }
  43.6623% {
    background: #00ff2f;
  }
  43.9956% {
    background: #00ff33;
  }
  44.3289% {
    background: #00ff37;
  }
  44.6622% {
    background: #00ff3c;
  }
  44.9955% {
    background: #00ff40;
  }
  45.3288% {
    background: #00ff44;
  }
  45.6621% {
    background: #00ff48;
  }
  45.9954% {
    background: #00ff4d;
  }
  46.3287% {
    background: #00ff51;
  }
  46.662% {
    background: #00ff55;
  }
  46.9953% {
    background: #00ff59;
  }
  47.3286% {
    background: #00ff5e;
  }
  47.6619% {
    background: #00ff62;
  }
  47.9952% {
    background: #00ff66;
  }
  48.3285% {
    background: #00ff6a;
  }
  48.6618% {
    background: #00ff6f;
  }
  48.9951% {
    background: #00ff73;
  }
  49.3284% {
    background: #00ff77;
  }
  49.6617% {
    background: #00ff7b;
  }
  49.995% {
    background: #00ff80;
  }
  50.3283% {
    background: #00ff84;
  }
  50.6616% {
    background: #00ff88;
  }
  50.9949% {
    background: #00ff8c;
  }
  51.3282% {
    background: #00ff91;
  }
  51.6615% {
    background: #00ff95;
  }
  51.9948% {
    background: #00ff99;
  }
  52.3281% {
    background: #00ff9d;
  }
  52.6614% {
    background: #00ffa2;
  }
  52.9947% {
    background: #00ffa6;
  }
  53.328% {
    background: #00ffaa;
  }
  53.6613% {
    background: #00ffae;
  }
  53.9946% {
    background: #00ffb3;
  }
  54.3279% {
    background: #00ffb7;
  }
  54.6612% {
    background: #00ffbb;
  }
  54.9945% {
    background: #00ffbf;
  }
  55.3278% {
    background: #00ffc4;
  }
  55.6611% {
    background: #00ffc8;
  }
  55.9944% {
    background: #00ffcc;
  }
  56.3277% {
    background: #00ffd0;
  }
  56.661% {
    background: #00ffd5;
  }
  56.9943% {
    background: #00ffd9;
  }
  57.3276% {
    background: #00ffdd;
  }
  57.6609% {
    background: #00ffe1;
  }
  57.9942% {
    background: #00ffe6;
  }
  58.3275% {
    background: #00ffea;
  }
  58.6608% {
    background: #00ffee;
  }
  58.9941% {
    background: #00fff2;
  }
  59.3274% {
    background: #00fff7;
  }
  59.6607% {
    background: #00fffb;
  }
  59.994% {
    background: cyan;
  }
  60.3273% {
    background: #00fbff;
  }
  60.6606% {
    background: #00f6ff;
  }
  60.9939% {
    background: #00f2ff;
  }
  61.3272% {
    background: #00eeff;
  }
  61.6605% {
    background: #00eaff;
  }
  61.9938% {
    background: #00e5ff;
  }
  62.3271% {
    background: #00e1ff;
  }
  62.6604% {
    background: #00ddff;
  }
  62.9937% {
    background: #00d9ff;
  }
  63.327% {
    background: #00d4ff;
  }
  63.6603% {
    background: #00d0ff;
  }
  63.9936% {
    background: #00ccff;
  }
  64.3269% {
    background: #00c8ff;
  }
  64.6602% {
    background: #00c3ff;
  }
  64.9935% {
    background: deepskyblue;
  }
  65.3268% {
    background: #00bbff;
  }
  65.6601% {
    background: #00b7ff;
  }
  65.9934% {
    background: #00b2ff;
  }
  66.3267% {
    background: #00aeff;
  }
  66.66% {
    background: #00aaff;
  }
  66.9933% {
    background: #00a6ff;
  }
  67.3266% {
    background: #00a1ff;
  }
  67.6599% {
    background: #009dff;
  }
  67.9932% {
    background: #0099ff;
  }
  68.3265% {
    background: #0095ff;
  }
  68.6598% {
    background: #0091ff;
  }
  68.9931% {
    background: #008cff;
  }
  69.3264% {
    background: #0088ff;
  }
  69.6597% {
    background: #0084ff;
  }
  69.993% {
    background: #007fff;
  }
  70.3263% {
    background: #007bff;
  }
  70.6596% {
    background: #0077ff;
  }
  70.9929% {
    background: #0073ff;
  }
  71.3262% {
    background: #006eff;
  }
  71.6595% {
    background: #006aff;
  }
  71.9928% {
    background: #0066ff;
  }
  72.3261% {
    background: #0062ff;
  }
  72.6594% {
    background: #005eff;
  }
  72.9927% {
    background: #0059ff;
  }
  73.326% {
    background: #0055ff;
  }
  73.6593% {
    background: #0051ff;
  }
  73.9926% {
    background: #004cff;
  }
  74.3259% {
    background: #0048ff;
  }
  74.6592% {
    background: #0044ff;
  }
  74.9925% {
    background: #0040ff;
  }
  75.3258% {
    background: #003bff;
  }
  75.6591% {
    background: #0037ff;
  }
  75.9924% {
    background: #0033ff;
  }
  76.3257% {
    background: #002fff;
  }
  76.659% {
    background: #002bff;
  }
  76.9923% {
    background: #0026ff;
  }
  77.3256% {
    background: #0022ff;
  }
  77.6589% {
    background: #001eff;
  }
  77.9922% {
    background: #0019ff;
  }
  78.3255% {
    background: #0015ff;
  }
  78.6588% {
    background: #0011ff;
  }
  78.9921% {
    background: #000dff;
  }
  79.3254% {
    background: #0008ff;
  }
  79.6587% {
    background: #0004ff;
  }
  79.992% {
    background: blue;
  }
  80.3253% {
    background: #0400ff;
  }
  80.6586% {
    background: #0800ff;
  }
  80.9919% {
    background: #0d00ff;
  }
  81.3252% {
    background: #1100ff;
  }
  81.6585% {
    background: #1500ff;
  }
  81.9918% {
    background: #1900ff;
  }
  82.3251% {
    background: #1e00ff;
  }
  82.6584% {
    background: #2200ff;
  }
  82.9917% {
    background: #2600ff;
  }
  83.325% {
    background: #2a00ff;
  }
  83.6583% {
    background: #2f00ff;
  }
  83.9916% {
    background: #3300ff;
  }
  84.3249% {
    background: #3700ff;
  }
  84.6582% {
    background: #3c00ff;
  }
  84.9915% {
    background: #4000ff;
  }
  85.3248% {
    background: #4400ff;
  }
  85.6581% {
    background: #4800ff;
  }
  85.9914% {
    background: #4d00ff;
  }
  86.3247% {
    background: #5100ff;
  }
  86.658% {
    background: #5500ff;
  }
  86.9913% {
    background: #5900ff;
  }
  87.3246% {
    background: #5e00ff;
  }
  87.6579% {
    background: #6200ff;
  }
  87.9912% {
    background: #6600ff;
  }
  88.3245% {
    background: #6a00ff;
  }
  88.6578% {
    background: #6e00ff;
  }
  88.9911% {
    background: #7300ff;
  }
  89.3244% {
    background: #7700ff;
  }
  89.6577% {
    background: #7b00ff;
  }
  89.991% {
    background: #7f00ff;
  }
  90.3243% {
    background: #8400ff;
  }
  90.6576% {
    background: #8800ff;
  }
  90.9909% {
    background: #8c00ff;
  }
  91.3242% {
    background: #9000ff;
  }
  91.6575% {
    background: #9500ff;
  }
  91.9908% {
    background: #9900ff;
  }
  92.3241% {
    background: #9d00ff;
  }
  92.6574% {
    background: #a200ff;
  }
  92.9907% {
    background: #a600ff;
  }
  93.324% {
    background: #aa00ff;
  }
  93.6573% {
    background: #ae00ff;
  }
  93.9906% {
    background: #b300ff;
  }
  94.3239% {
    background: #b700ff;
  }
  94.6572% {
    background: #bb00ff;
  }
  94.9905% {
    background: #bf00ff;
  }
  95.3238% {
    background: #c300ff;
  }
  95.6571% {
    background: #c800ff;
  }
  95.9904% {
    background: #cc00ff;
  }
  96.3237% {
    background: #d000ff;
  }
  96.657% {
    background: #d400ff;
  }
  96.9903% {
    background: #d900ff;
  }
  97.3236% {
    background: #dd00ff;
  }
  97.6569% {
    background: #e100ff;
  }
  97.9902% {
    background: #e500ff;
  }
  98.3235% {
    background: #ea00ff;
  }
  98.6568% {
    background: #ee00ff;
  }
  98.9901% {
    background: #f200ff;
  }
  99.3234% {
    background: #f600ff;
  }
  99.6567% {
    background: #fb00ff;
  }
  99.99% {
    background: magenta;
  }
  100.3233% {
    background: #ff00fb;
  }
  100.6566% {
    background: #ff00f6;
  }
  100.9899% {
    background: #ff00f2;
  }
  101.3232% {
    background: #ff00ee;
  }
  101.6565% {
    background: #ff00ea;
  }
  101.9898% {
    background: #ff00e6;
  }
  102.3231% {
    background: #ff00e1;
  }
  102.6564% {
    background: #ff00dd;
  }
  102.9897% {
    background: #ff00d9;
  }
  103.323% {
    background: #ff00d4;
  }
  103.6563% {
    background: #ff00d0;
  }
  103.9896% {
    background: #ff00cc;
  }
  104.3229% {
    background: #ff00c8;
  }
  104.6562% {
    background: #ff00c3;
  }
  104.9895% {
    background: #ff00bf;
  }
  105.3228% {
    background: #ff00bb;
  }
  105.6561% {
    background: #ff00b7;
  }
  105.9894% {
    background: #ff00b2;
  }
  106.3227% {
    background: #ff00ae;
  }
  106.656% {
    background: #ff00aa;
  }
  106.9893% {
    background: #ff00a6;
  }
  107.3226% {
    background: #ff00a1;
  }
  107.6559% {
    background: #ff009d;
  }
  107.9892% {
    background: #ff0099;
  }
  108.3225% {
    background: #ff0095;
  }
  108.6558% {
    background: #ff0091;
  }
  108.9891% {
    background: #ff008c;
  }
  109.3224% {
    background: #ff0088;
  }
  109.6557% {
    background: #ff0084;
  }
  109.989% {
    background: #ff0080;
  }
  110.3223% {
    background: #ff007b;
  }
  110.6556% {
    background: #ff0077;
  }
  110.9889% {
    background: #ff0073;
  }
  111.3222% {
    background: #ff006e;
  }
  111.6555% {
    background: #ff006a;
  }
  111.9888% {
    background: #ff0066;
  }
  112.3221% {
    background: #ff0062;
  }
  112.6554% {
    background: #ff005d;
  }
  112.9887% {
    background: #ff0059;
  }
  113.322% {
    background: #ff0055;
  }
  113.6553% {
    background: #ff0051;
  }
  113.9886% {
    background: #ff004c;
  }
  114.3219% {
    background: #ff0048;
  }
  114.6552% {
    background: #ff0044;
  }
  114.9885% {
    background: #ff0040;
  }
  115.3218% {
    background: #ff003b;
  }
  115.6551% {
    background: #ff0037;
  }
  115.9884% {
    background: #ff0033;
  }
  116.3217% {
    background: #ff002f;
  }
  116.655% {
    background: #ff002b;
  }
  116.9883% {
    background: #ff0026;
  }
  117.3216% {
    background: #ff0022;
  }
  117.6549% {
    background: #ff001e;
  }
  117.9882% {
    background: #ff001a;
  }
  118.3215% {
    background: #ff0015;
  }
  118.6548% {
    background: #ff0011;
  }
  118.9881% {
    background: #ff000d;
  }
  119.3214% {
    background: #ff0008;
  }
  119.6547% {
    background: #ff0004;
  }
  119.988% {
    background: red;
  }
}

SassMeister-rendered.html

<div>
  <button class="button" type="button">My Button</button>
</div>