Почему transition создает черный бордер?

Question

[Capablanca]

Создаю кнопку. При hover должен появляться border.
Но, если прописать transition time то сначала вокруг кнопки создается черный бордер в 1 пиксель.
Это фишка именно transition свойства? То есть чтобы такого не было мне пришлось изначально задать бордер цвета фона.

Вопрос: я что-то не так делаю? или при транзишион бордера (который не задан изначально) всегда будет вылезать некий дефолтный черный бордер?
Причем, это происходит только при первом наведении на объект. Далее уже все работает нормально.

Отобразил суть в фиддле
https://jsfiddle.net/CapablancaYEAH/ou8wz55a/

Answer 1

[AlexRas]

https://jsfiddle.net/ou8wz55a/6/

Comments

[Capablanca]

спасибо вам, как и думал, должен быть некий "филлер" предварительно

Answer 2

[Артур Карапетян]

Добавьте в css

.CTA_1 {
  border-color: cyan;
}

Comments

[Capablanca]

спасибо вам, как и думал, должен быть некий "филлер" предварительно

[Артур Карапетян]

Capablanca: Не за что, кнопка "отметить решением" - лучшая награда

Answer 3

[krumza]

бордер вроде берет по дефолту цвет color , если border-color не указан
вы добавьте border: 3px solid transparent; для .CTA_1 чтобы не скакало и чтобы черного не было

Comments

[Capablanca]

спасибо вам, как и думал, должен быть некий "филлер" предварительно