JSFiddle - React, Tailwind, and code Playground

by mendesjuan

HTML

<button id="signUpLogIn-logInBtn" class="logInBtn">Add One<p class="logInBtnSub">See Console</p></button>

CSS

.logInBtn{
	    background: url('http://s10.postimg.org/z9yrvulut/log_In_Icon.png') no-repeat center 10px;
	    background-size: auto 45%;
	    width: 135px;
	    height: 135px;
	    text-transform: uppercase;
	    font-size: 1.4em;
	    font-weight: 700;
	    background-color: #c6c6c6;
	    box-shadow: 0 8px #878787;
	    position: relative;
	    border-radius: 10px;
	    top:2em;
	    padding: 0;
	    padding-top:60px;
	    color: #402a3e;
	     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;
		border: none;
		outline: none;
		cursor: pointer;
	}
	.logInBtn:active{
	    top:2.2em;
	}
	.logInBtnSub{
	    width: 100%;
	    text-transform: capitalize;
	    height: auto;
	    font-size: 0.6em;
	    color: #878787;
	    font-weight: 700;
	    text-align: center;
	}

JavaScript

var clickCounter = 0;

$('button').mouseup(function(){
    clickCounter++;
    
    console.log('times clicked: ' + clickCounter);
});