JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="container">
<button id="largeButton" type="button">
    <h1>^^^^^^</h1></button>
   
</div>

CSS

#container {
    text-align: center;
    
}


#largeButton {
    
    width: 400px; margin: 10px auto;
    border-radius: 100px;
   background-color: #ffa;
    font-family: Arial;
    font-weight: bold;
    letter-spacing: 3px;
    transition: 1.5s linear all;
}

#largeButton:active {color: #ff0; width: 300px; letter-spacing: 10px;}

#leftButton {
    position: absolute;
    top: 50px;
    left: 30px;
}
#rightButton {
    position: absolute;
    top: 50px;
    right: 150px;
}
h1 {
    font-size:90px;
    line-height: 80px;
    background-color: #f00;
    border-radius: 100px;
    padding: 30px;
   letter-spacing:-15px;
    color: #ff0;
    font-weight: bold;
    box-shadow:2px 2px 10px #000;
    width: 350px;
    
}

JavaScript

$('button').hide().each(function () {
    $(this).fadeIn(1000 * Math.random());
});