Я разрабатываю анимацию скользящей кнопки: hover, но по какой-то причине, когда кнопка зависает, я все еще могу видеть цвет из элемента под ней, проходящего через нижний и верхний левый углы, как вы можете видеть на втором изображении, его не так много, но в уменьшенном масштабе он отображает цветной пиксель на экране, я даже не знаю, как описать его по-английски для поиска решений в Google (английский - не мой родной язык). Кажется, что это странное взаимодействие между overflow: hidden
и border-radius
. заранее спасибо.
ps: может быть, градиент - это то, что вам нужно?
Вот код html / css:
<div class = "header-buttons">
<a class = "btn" href = "#"><span>Contactez-nous</span></a>
</div>
.header-buttons {
grid-area: btn;
display: flex;
justify-content: space-evenly;
.btn {
font-size: 1.5rem;
padding: 1rem 1.6rem;
background-color: inherit;
color: inherit;
border-radius: 2px;
overflow: hidden;
position: relative;
font-weight: 500;
display: block;
span {
z-index: 2;
position: relative;
}
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: $gris-clair;
transform: translatex(-102%);
transition: all 0.3s ease-in-out;
}
&:hover {
color: $font;
&::before {
transform: translatex(-3%);
}
}
}
}
Я не мог понять, как решить эти углы. Вот код, если кто-то хочет поиграть: codepen.io/cisco_iz/pen/eYggzVW?editors=1100 Я думаю, это известно как проблема субпикселей. Подробнее об этом здесь: johnresig.com/blog/sub-pixel-problems-in-css
Кажется, вы на правильном пути, возможно, у вас есть идея, что в hove есть градиент в конце, чтобы избежать проблемы с углом, которая, похоже, является старой проблемой, которая никогда не решалась браузерами.