Кнопка с изменением фона
 

Здравствуйте! Я пытался сделать что-то вроде кнопки, при наведении на которую постепенно(как будто загружается) меняется фон.

var crElement = document.createElement("button");
				crElement.innerHTML = "Действовать";
				crElement.setAttribute("style", "margin-top:10px; padding:7px 10px; font-size:22px; 		background-color:rgb(14,131,205); color:white; border:3px solid white;");
				crElement.setAttribute("onmouseover", "fora()");
			var callToAction = document.getElementById("callToAction");
				callToAction.appendChild(crElement);
			var posY = crElement.offsetTop;
			var posX = crElement.offsetLeft;
			var wY = crElement.clientHeight;
			var wX = crElement.clientWidth;
			
			var crElement2 = document.createElement("button");
				crElement2.innerHTML = "Действовать";
				crElement2.setAttribute("style", "position:absolute; padding:7px 10px; font-size:22px; background-color:rgb(255,255,255); color:rgb(14,131,238); border:3px solid rgb(14,131,205); width:0px;");
				crElement2.style.top = posY + "px";
				crElement2.style.left = posX + "px";
			var callToAction = document.getElementById("callToAction");
				callToAction.appendChild(crElement2);
			
			function fora() {
				for(var i = 0; i < (crElement.clientWidth + 6); ++i) {
					funcFor(i);
				}
			}
			function funcFor(i) {
					setTimeout(widthPlus, 1000, i);
			}
			function widthPlus(i) {
				crElement2.style.width = i + "px";
			}

Но получается, что он меняет фон без визуальной загрузки.
Подскажите пожалуйста, что не так?
Может быть кто-то предложит альтернативный способ? Только без использования чужих скриптов.

В стили добавь:

transition:0.6s; -webkit-transition:0.6s; -moz-ransition:0.6s;