The HTML:

	  <div class="button">

	  	<div class="container">

	  		<div class-"tick"></div>

	  	</div>

	  </div>
	  

The javaScript:

let button = document.querySelector(".button");
	let buttonText = document.querySelector(".tick");

	const tickMark = // 'Your checkmark image goes here -- see the actual page code for an svg example';
		(buttonText.innerHTML = "Submit");
		
	button.addEventListener("click", function() {
		if (buttonText.innerHTML !== "Submit") {
			(buttonText.innerHTML = "Submit");
		} else if (buttonText.innerHTML === "Submit") {
			buttonText.innerHTML = tickMark;
		}
		this.classList.toggle("button__circle");
	});

The CSS:

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

.button, .tick {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.button {
	width: 360px;
	height: 80px;
	font-family: "Kaushan Script", cursive;
	font-weight: 900;
	background: radial-gradient(#784866, #ceadc2);
	border-radius: 50px;
	border: 4px solid #000;
	outline: 3px solid #000;
	outline-offset: -10px;
	transition: all 0.3s cubic-bezier(0.07, 0.17, 0.4, 0.83);
}
.button svg {
	transform: rotate(180deg);
	transition: all 0.5s;
}
.button__circle {
	width: 120px;
	height: 120px;
	background: #75988a;
	border-radius: 50%;
	transform: rotate(-180deg);
}
.button:hover {
	cursor: pointer;
}
.tick {
	color: #000;
	text-shadow: 2px 2px #bbb;
	font-size: 2em;
	transition: all 0.9s;
}