JSFiddle - React, Tailwind, and code Playground

Button to auto-start action (with transition)

by tonytlwu

HTML

<a id='start' href='#'>START</a>

CSS

a {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
  background: #848484;
  display: inline-block;
  padding: 30px 70px;
  color: #fff;
  font-family: sans-serif;
  text-decoration: none;
  -webkit-transition: all 1.0s linear;
}

a.clicked {
  background-color: #bada55;
  padding: 60px 110px;
}

a:after {
  content: 'START';
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate3d(-50%,-50%,0);
  display: inline-block;
  padding: 45px 90px;
  border: 1px solid #cfcfcf;
  z-index: -1;
}

a:before {
  content: 'START';
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate3d(-50%,-50%,0);
  display: inline-block;
  padding: 60px 110px;
  border: 1px solid #cfcfcf;
  z-index: -1;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale">
<style>

JavaScript

var startBtn = document.getElementById('start');
var CLICK_DELAY = 2000;
var next = function(){
	// Go to next screen
};

startBtn.addEventListener('click', function(e){
	e.preventDefault();
  e.stopPropagation();
	startBtn.classList.add('clicked');
  next();
});
setTimeout(function(){
  startBtn.click();
}, CLICK_DELAY);