JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<button id="reg">
  Regular Button
</button>
<button type="submit" class="styled">
  Stylized button
</button>

<div id="regpane" class="pane">
  This is the regular button; its styling depends on your operating system and browser.
</div>

<div id="stylepane" class="pane">
  This is the stylized button; its styling is consistent between browsers and is based on CSS provided to it.
</div>

CSS

.styled {
  color: white;
  background-color: green;
  padding: 5px;
  border: 1px solid green;
}

.styled:active {
  background-color: darkgreen;
  border: 1px dotted white;
}

.pane {
  position: absolute;
  margin-top: 50px;
  opacity: 0;
  width: 50%;
}

#regpane {
  left: 5px;
}

#stylepane {
  right: 5px;
}

JavaScript

var vis1 = false,
  vis2 = false,
  panes = ["regpane", "stylepane"];

function togglePane(pane, flag) {
  if (!flag) {
    fade("in", document.querySelector("#" + panes[pane]));
  } else {
    fade("out", document.querySelector("#" + panes[pane]));
  }
}

document.querySelector("#reg").addEventListener("click", function() {
  togglePane(0, vis1);
  vis1 = !vis1;
});
document.querySelector(".styled").addEventListener("click", function() {
  togglePane(1, vis2);
  vis2 = !vis2;
});

function fade(inOut, node) {
  var opacity = ((inOut == "in") ? 1 : 99);
  var timer = window.setInterval(function() {
    (inOut == "in") ? (opacity += 5) : (opacity -= 5);
    node.style.opacity = opacity / 100.0;
    if (opacity >= 100 || opacity <= 0) {
      window.clearInterval(timer);
    }
  }, 50);
}