<style>
:root {

  
/* DARK theme */
  
  --d_R: #FF0000;   /* Red    */
  --d_O: #FFA726;   /* Orange */
  --d_Y: #FFFF00;   /* Yellow */
  --d_G: #76FF03;   /* Green  */
  --d_B: #81D4FA;   /* Blue   */
  --d_I: #18FFFF;   /* Indigo - Actually Cyan */
  --d_V: #FF30AA;   /* Violet - Actuall Pink  */
  
/* LIGHT theme */
  
  --l_R: #D81B60;   /* Red    */
  --l_O: #BF360C;   /* Orange - Actually Brown */
  --l_Y: #00796B;   /* Yellow - Actually Teal  */
  --l_G: #33691E;   /* Green  */
  --l_B: #0D47A1;   /* Blue   */
  --l_I: #512DA8;   /* Indigo */
  --l_V: #8E24AA;   /* Violet */

/* DEFAULT is light */

        --bg: white; --fg: black; --ic: black;
        --R: var(--l_R); --O: var(--l_O); --Y: var(--l_Y); --G: var(--l_G); --B: var(--l_B); --I: var(--l_I); --V: var(--l_V);
}

.light {--bg: white; --fg: black; --ic: black;
        --R: var(--l_R); --O: var(--l_O); --Y: var(--l_Y); --G: var(--l_G); --B: var(--l_B); --I: var(--l_I); --V: var(--l_V);
}
.dark  {--bg: black; --fg: white; --ic: white;
        --R: var(--d_R); --O: var(--d_O); --Y: var(--d_Y); --G: var(--d_G); --B: var(--d_B); --I: var(--d_I); --V: var(--d_V);
}

/* Choose the internal colour (depending on Light [default] or Dark theme */

.R {--ic: var(--R)}
.O {--ic: var(--O)}
.Y {--ic: var(--Y)}
.G {--ic: var(--G)}
.B {--ic: var(--B)}
.I {--ic: var(--I)}
.V {--ic: var(--V)}

button.animated {
  display      : inline-block;
  margin       : 0.5em;
  padding      : 0.5em;
  border-radius: 10px;
  border       : 2px solid;
  font         : 16px 'Open Sans', sans-serif;
  background   : none;
  box-shadow   : 0 0 8px var(--fg);
  text-shadow  : 0 0 1px var(--fg);
  text-align   : center;
  color        : var(--ic);
  border-color : var(--ic);
  outline      : none;
  cursor       : pointer;
  transition   : all .5s;
}

button.animated>a, button.animated>span {
  position        : relative;
  text-decoration : none;
  background-color: transparent;
  z-index         : 1;
  color           : inherit;
}


button.animated.hov_L2R {
  background     : linear-gradient(to left, var(--ic), var(--ic)) no-repeat;
  background-size: 0% 100%;
}
button.animated.hov_L2R:hover {
  background-size: 100% 100%;
  color          : var(--bg);
}

button.animated.hov_T2B {
  background     : linear-gradient(to left, var(--ic), var(--ic)) no-repeat;
  background-size: 100% 0%;
}
button.animated.hov_T2B:hover {
  background-size: 100% 100%;
  color          : var(--bg);
}

button.animated.hov_R2L {
  background         : linear-gradient(to left, var(--ic), var(--ic)) no-repeat;
  background-position: right center;
  background-size    : 0% 100%;
}
button.animated.hov_R2L:hover {
  background-size: 100% 100%;
  color          : var(--bg);
}

button.animated.hov_B2T {
  background         : linear-gradient(to left, var(--ic), var(--ic)) no-repeat;
  background-position: center bottom;
  background-size    : 100% 0%;
}
button.animated.hov_B2T:hover {
  background-size: 100% 100%;
  color: var(--bg);
}

button.animated.hov_BL2TR {
  position: relative;
  overflow: hidden;
}
button.animated.hov_BL2TR:before {
  content         : "";
  background-color: var(--ic);
  position        : absolute;
  width           : 0;
  height          : 100%;
  top             : 0;
  left            : 0;
  z-index         : 0;
  transform-origin: bottom left;
  transform       : skewX(45deg);
  transition      : all .5s;
}
button.animated.hov_BL2TR:hover {
  color: var(--bg);
}
button.animated.hov_BL2TR:hover:before {
  width: 150%;
}

button.animated.hov_TR2BL {
  position: relative;
  overflow: hidden;
}
button.animated.hov_TR2BL:before {
  content         : "";
  background-color: var(--ic);
  position        : absolute;
  z-index         : 0;
  height          : 100%;
  width           : 0;
  top             : 0;
  right           : 0;
  transform-origin: top right;
  transform       : skewX(45deg);
  transition      : all .5s;
}
button.animated.hov_TR2BL:hover {
  color: var(--bg);
}
button.animated.hov_TR2BL:hover:before {
  width: 150%;
}

button.animated.hov_H2M {
  overflow: hidden; 
  position: relative;
}
button.animated.hov_H2M:before, button.animated.hov_H2M:after {
  content         : "";
  height          : 100%;
  width           : 0;
  position        : absolute;
  z-index         : 0;
  background-color: var(--ic);
  top             : 0;
  transition      : all 0.25s;
}
button.animated.hov_H2M:before {
  left: 0;
}
button.animated.hov_H2M:after {
  right: 0;
}
button.animated.hov_H2M:hover {
  color: var(--bg);
}
button.animated.hov_H2M:hover:before, button.animated.hov_H2M:hover:after {
  width: 50%;
}

button.animated.hov_D2M {
  overflow: hidden; 
  position: relative;
}
button.animated.hov_D2M:before, button.animated.hov_D2M:after {
  content         : "";
  position        : absolute;
  z-index         : 0;
  height          : 100%;
  width           : 0;
  top             : 0;
  background-color: var(--ic);
  transition      : all .4s;
}
button.animated.hov_D2M:before {
  left     : 0px;
  transform-origin: top left;
  transform: skewX(-45deg);
}
button.animated.hov_D2M:after {
  right    : 0px;
  transform-origin: bottom right;
  transform: skewX(-45deg);
}
button.animated.hov_D2M:hover {
  color: var(--bg);
}
button.animated.hov_D2M:hover:before, button.animated.hov_D2M:hover:after {
  width: 100%;
}

button.animated.hov_M2V {
  overflow: hidden; 
  position: relative;
}
button.animated.hov_M2V:before, button.animated.hov_M2V:after {
  content         : "";
  position        : absolute;
  z-index         : 0;
  background-color: var(--ic);
  width           : 100%;
  height          : 0;
  left            : 0;
  transition      : all .25s;
}
button.animated.hov_M2V:before {
  bottom: 50%;
}
button.animated.hov_M2V:after {
  top: 50%;
}
button.animated.hov_M2V:hover {
  color: var(--bg);
}
button.animated.hov_M2V:hover:before, button.animated.hov_M2V:hover:after {
  height: 50%;
}
</style>