<main>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button> <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button> <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button> <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>
  <button>Style This</button>

</main>
button {
  margin: 20px;
}
const elements = document.querySelectorAll("main *");

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randcolor() {
  return "#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0");
}

function invertColor(hex) {
  if (hex.indexOf("#") === 0) {
    hex = hex.slice(1);
  }
  // convert 3-digit hex to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error("Invalid HEX color.");
  }
  // invert color components
  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  // pad each with zeros and return
  return "#" + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join("0");
  return (zeros + str).slice(-len);
}

function shadeColor(color, percent) {
  var R = parseInt(color.substring(1, 3), 16);
  var G = parseInt(color.substring(3, 5), 16);
  var B = parseInt(color.substring(5, 7), 16);

  R = parseInt((R * (100 + percent)) / 100);
  G = parseInt((G * (100 + percent)) / 100);
  B = parseInt((B * (100 + percent)) / 100);

  R = R < 255 ? R : 255;
  G = G < 255 ? G : 255;
  B = B < 255 ? B : 255;

  var RR = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16);
  var GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16);
  var BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16);

  return "#" + RR + GG + BB;
}

function guidGenerator() {
  return Math.random()
    .toString(36)
    .replace(/[^a-z]+/g, "")
    .substr(2, 10);
}

function rand_array(ar) {
  var a = ar;
  var randomItem = a[Math.floor(Math.random() * a.length)];
  return randomItem;
}

elements.forEach((el) => {
  var c = randcolor();
  document.querySelector("body").style.background = shadeColor(c, -80);
  document.querySelector("body").style.color = invertColor(c);
  el.style.padding = randomIntFromInterval(1, 20) + "px";
  var c = randcolor();
  el.style.background = c;
  var id = guidGenerator();
  el.id = id;
  el.style.color = invertColor(c);
  el.innerHTML = "I'm " + id;
  el.style.borderColor = randcolor();
  el.style.borderWidth = randomIntFromInterval(1, 2) + "px";
  el.style.transition = "all " + (Math.random() * (0 - 1) + 1).toFixed(4) + "s";
  el.style.borderRadius = randomIntFromInterval(1, 20) + "px";
  el.style.boxShadow =
    rand_array(["inset  ", "  "]) +
    "  " +
    randomIntFromInterval(0, 10) +
    "px  " +
    randomIntFromInterval(0, 10) +
    "px  " +
    randomIntFromInterval(0, 20) +
    "px  " +
    randcolor();
  var fontType = [
    "Segoe UI",
    "Arial",
    "Verdana",
    "Helvetica",
    "sans-serif",
    "Calibri"
  ];
  var num;
  num = Math.floor(Math.random() * 3);
  el.style.fontFamily = fontType[num];
  el.style.fontSize = randomIntFromInterval(10, 20) + "px";

  var css = `
              #${id}:hover {
                background: ${randcolor()} !important;
                box-shadow: ${
                  rand_array(["inset  ", "  "]) +
                  "  " +
                  randomIntFromInterval(0, 10) +
                  "px  " +
                  randomIntFromInterval(0, 10) +
                  "px  " +
                  randomIntFromInterval(0, 20) +
                  "px  " +
                  randcolor()
                } !important;
                color: ${c} !important;
              }

              #${id}:focus {
                border: ${randomIntFromInterval(
                  1,
                  2
                )}px solid ${randcolor()} !important;
                box-shadow: ${
                  rand_array(["inset  ", "  "]) +
                  "  " +
                  randomIntFromInterval(0, 10) +
                  "px  " +
                  randomIntFromInterval(0, 10) +
                  "px  " +
                  randomIntFromInterval(0, 20) +
                  "px  " +
                  randcolor()
                } !important;
              }
              `;

  var head = document.head || document.getElementsByTagName("head")[0],
    style = document.createElement("style");

  head.appendChild(style);

  style.type = "text/css";
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.