Почему css код срабатывает только на первую кнопку?

Question

[gazes12]

https://jsfiddle.net/01dr8nz9/1/

При наводке на кнопки срабатывает этот код:

.btn{
	background: linear-gradient(129.54deg, #FF7B4E 15.57%, #FF584E 95.03%), #FFFFFF;
	color: #fff;
	position: relative;
	z-index: 1000;

	&:hover{
		&::after{
			opacity: 1;
		}
	}

	&::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;


		background: linear-gradient(129deg, rgba(255,88,78,1) 30%, rgba(255,123,78,1) 70%);
		opacity: 0;
		transition: opacity .3s ease-in-out;
		z-index: -1;
	}
}

Ну почему-то, когда навожу на кнопку которая не в nav, то css код не срабатывает, почему так? Буду рад за помощь!

Comments

[Вадим]

А разметка?

[gazes12]

Вадим, Разметка тут: https://jsfiddle.net/01dr8nz9/1/

[Вадим]

gazes12, а, ну да, мне просто лень vpn включать. В текущих реалиях лучше размещать на codepen.

[gazes12]

Вадим, https://codepen.io/gazes12/pen/rNdzYoy

Answer 1

[Вадим]

gazes12,

Почему css код срабатывает только на первую кнопку

Он срабатывает и на вторую.
Но конечный рендер разный.

У Вас на :after элементе стоит z-index: -1 соответственно, он проваливается под саму кнопку.
В навигации не проваливается из-за display: flex. Объяснения почему так происходит я не помню.

Сейчас сходу для Вашего решения быстро в голову приходит только вариант обернуть текст кнопки в span, задать ему position: relative и z-index: 1.
А z-index: -1 для after элемента у кнопки поменять на 0.