Почему html кнопка с кастомным background «некрасиво» переключается?

Question

[VtzzzZZ]

Имеется достаточно простой код для замены дефолтного background-а html кнопки .
вот CSS для кнопки :

#UIContainer .ownClass{
		background: url(image/otherBackground.svg);
		width: 118px;
		height: 50px;
	}

#UIContainer .ownClass:active {
    background-image: url(imag/otherBackgroundDisabled.svg);
}

А вот добавляем ее :

let buildButton = function () {

	let UIContainer = document.getElementById('UIContainer');

	let button = document.createElement('button');

	button.className = "ownClass";

	UIContainer.appendChild(button);
}

buildButton ()

в результате получается кнопка с собственным изображением в кач-ве background-а и некоторым гличем :
если нажать на кнопку cразу после загрузки страницы , то переключение между двумя image-ми происходит с некрасивым наползанием изображения . При дальнейших нажатиях все ок

Вот здесь фиддл :
https://jsfiddle.net/Vitozz_RDX/a9kxs73z/16/

глич трудно уловить , тем не менее он есть . Может я просто неправильно все это делаю изначально ? Опыта в разработке у меня нет

Answer 1

[Павел]

Вопрос в другом, зачем нагружать сайт и загружать аж 3 изображения для такой простой кнопки? Она легко реализуется на css

Comments

[VtzzzZZ]

было бы здорово . Можете реализовать ?

[Павел]

VtzzzZZ, https://jsfiddle.net/ch0m6j25/

[VtzzzZZ]

Павел, подбираю челюсть . Просто здорово .
Оставлю вопрос , все же , из любопытства