<div id="app">
</div>
// css variables
var cssVars = {
    babyBlue:'rgba(44, 118, 238, 0.1)',
	  red: '#f53e53',
    dgray:'#969696',
    paddingX:'7px',
	  paddingY:'10px',
    baseFontSize:'1rem',
		borderRadius:'15px',
};

// css for button
const cssJS = `
  body {
		background: ${cssVars.babyBlue};
	}
  .btn {
    padding: ${cssVars.paddingY} ${cssVars.paddingX};
    font-size: ${cssVars.baseFontSize};
    border-radius: ${cssVars.borderRadius};
    color: white;
    background-color: ${cssVars.red};
  }
`;

const button = `
	<button class="btn" id="button">CSS/JS Button</button>
`;

// Render styles.
var sheets = document.createElement('style');
sheets.id = "cssjs";

document.head.appendChild(sheets).textContent = cssJS;

// Render html.
document.getElementById('app').innerHTML += button;

 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.