Почему не работает ссылка?

Question

[PhanLom]

Вот так выглядит код HTML

<div class="Button">
            <div class="btn btn-one">
                    <a class="MyLink" href="https://google.com">Link</a>
                </div>
            </div>

Вот так выглядит код CSS

div[class*=Button] {
	height: 33.33%;
	width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;    
}

.MyLink {
    
    text-decoration:none;
    color: black;
}

.btn {
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 250px;
	cursor: pointer;
}

.btn-one {
	font-size: 22px;
    color: #000;
	transition: all 0.5s;
	position: relative;
}
.btn-one::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.btn-one:hover::before {
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.btn-one::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1px solid rgba(0,0,0,0.5);
	transform: scale(1.2,1.2);
}
.btn-one:hover::after {
	opacity: 1;
	transform: scale(1,1);
}

При нажатии на ссылку я не могу перейти на сайт, в чём моя ошибка?

Answer 1

[Алексей Уколов]

Элементы ::before и ::after располагаются поверх ссылки и перехватывают нажатия на неё.
Самое простое решение - указать для них pointer-events: none;. Если же нужна поддержка древних браузеров, нужно играть с z-index или вообще всё переделывать.

Answer 2

[n1ksON]

В том, что у вас следующая структура: Кнопка > Ссылка
Если нажать на кнопку, то ничего не произойдёт. А если нажать на ссылку, то произойдёт переадресация.
Вы либо делаете так: Ссылка > Кнопка, либо добавьте событие клика на кнопку, после которого должна пройти переадресация.
То есть, либо:

<a href="google.com">
  <button>Button</button>
</a>

Либо:

<button>Button</button>
<script>
document.querySelector('button').addEventListener('click', () => {
  window.open('https://google.com')
})
</script>

Comments

[Алексей Уколов]

Здесь нет кнопки. Есть див, стилизованный как кнопка.

[n1ksON]

Алексей Уколов, да какая разница? Нельзя div в a запихнуть или повесить событие на div? И собственно поэтому к вёрстке тоже вопрос

[Алексей Уколов]

Разница огромная - у дива нет никакого поведения. Вешать событие - это кривой костыль, который для дива и не нужен, вдобавок. Действительно, самым простым решением было бы обернуть весь блок в ссылку, а не ссылку в блок, тут вы правы.