* {

  box-sizing: border-box;

}

​

button {

  border: 0;

  font-size: 2em;

  color: white;

  background-color: #00AAFF;

  margin: 0.5em;

  display: inline-block;

}

// Potential options for our button generator to make use of

var fontStyles = ['normal','italic'];

var fontWeights = ['normal','bold'];

var fontVariants = ['normal','small-caps'];

var textTransforms = ['none','uppercase','lowercase','capitalize'];

var borderStyles = ['solid', 'dashed', 'dotted'];

​

​

// Our button-building function; just give it a number of buttons to build

function buildButton(num) {

  // Build us a style element to drop classes into

  var style = document.createElement('style');

  document.body.appendChild(style);

  // Grab the embedded style element for later adding of classes

  var classes = document.querySelector('style');

  for (var i=0; i<num; i++) {

    // Build our button element and prep a class to style it with

    var button = document.createElement('button');

    var buttonText = document.createTextNode('Button');

    button.appendChild(buttonText);

    button.classList.add('button'+i);

    // Generate the styling for our button

    var styling = '';

    // Set background color

    styling += 'background-color:#'+Math.floor(Math.random()*16777215).toString(16)+';';

    // Set some font styling options

    styling += 'font-size:'+Math.floor(Math.random() * 100 + 100)/100+'em;';

    styling += 'font-style:'+fontStyles[Math.floor(Math.random() * fontStyles.length)]+';';

    styling += 'font-weight:'+fontWeights[Math.floor(Math.random() * fontWeights.length)]+';';

    styling += 'font-variant:'+fontVariants[Math.floor(Math.random() * fontVariants.length)]+';';

    styling += 'text-transform:'+textTransforms[Math.floor(Math.random() * textTransforms.length)]+';';

    // Set the padding for each button's text

    var paddingLR = (Math.floor(Math.random() * 500) + 200)/1000;

    styling += 'padding-left:'+paddingLR+"em;";

    styling += 'padding-right:'+paddingLR+"em;";

    var paddingTB = (Math.floor(Math.random() * 300) + 200)/1000;

    styling += 'padding-top:'+paddingTB+"em;";

    styling += 'padding-bottom:'+paddingTB+"em;";

    // Either set a border or a drop-shadow

    var border = false;

    var boxShadow = false;

    if ( Math.random() < 0.5 ) {

      styling += 'border-style:'+borderStyles[Math.floor(Math.random() * borderStyles.length)]+';';

      styling += 'border-width:'+Math.floor(Math.random() * 5)+"px;";

      styling += 'border-color:#'+Math.floor(Math.random()*16777215).toString(16)+';';

      styling += 'border-radius:'+Math.floor(Math.random() * 10)+"px;";

      border = true;

    } else {

      var shadowOffset = Math.floor(Math.random() * 8);

      styling += 'box-shadow:'+shadowOffset+'px '+shadowOffset+'px '+Math.floor(Math.random() * 10)+"px black;";

      boxShadow = true;

    }

​

    // Develop styling for hover/focus states

    var intStyling = '';

    var transitions = [];

    // Maybe change the background color

    if ( Math.random() < 0.6 ) {

      intStyling += 'background-color:#'+Math.floor(Math.random()*16777215).toString(16)+';';

      transitions.push('background-color');

    }

    // Change the button border/drop-shadow (if has)

    if ( border == true ) {

      intStyling += 'border-color:#'+Math.floor(Math.random()*16777215).toString(16)+';';

      transitions.push('border-color');

      intStyling += 'border-width:'+Math.floor(Math.random() * 5)+"px;";

      transitions.push('border-width');

    } 

​

    if ( boxShadow == true ) {

      var shadowOffset = Math.floor(Math.random() * 6);

      intStyling += 'box-shadow:'+shadowOffset+'px '+shadowOffset+'px '+Math.floor(Math.random() * 4)+"px black;";

      transitions.push('box-shadow');

    }

    // Maybe change the button through transforms

    var transformChange = Math.random();

    if ( transformChange < 0.1 ) {

      intStyling += 'transform: rotate('+(Math.floor(Math.random() * 20000) - 5000)/1000+'deg);';

      transitions.push('transform');

    } else if ( transformChange < 0.6 && transformChange >= 0.1 ) {

      intStyling += 'transform: scale('+(Math.floor(Math.random() * 500) + 800)/1000+');';

      transitions.push('transform');

    } else if ( transformChange < 0.8 && transformChange >= 0.6 ) {

      if ( Math.floor < 0.5 ) {

        intStyling += 'transform: translatey('+(Math.floor(Math.random() * 20) - 10)+'px);';

      } else {

        intStyling += 'transform: translatex('+(Math.floor(Math.random() * 20) - 10)+'px);';

      }

      transitions.push('transform');

    }

    // Build list of transitions to apply

    var transitionList = 'transition:';

    for (var j=0; j<transitions.length; j++) {

      transitionList += transitions[j]+' 0.35s';

      if ( j==transitions.length-1 ) {

        transitionList += ';';

      } else {

        transitionList += ',';

      }

    }   

    // Create and set the default state for the button

    classes.innerHTML += '.button'+i+'{'+styling+transitionList+'cursor:pointer;}';

    // Apply focus/hover state styling

    classes.innerHTML += '.button'+i+':hover, .button'+i+':focus {'+intStyling+'}';

    // Add the button to the page

    document.body.appendChild(button);

  }

}

​

buildButton(150);