Цвет фона, проходящий через позицию: абсолютный псевдоэлемент

Я разрабатываю анимацию скользящей кнопки: 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%);
            }
        }
    }
}

Цвет фона, проходящий через позицию: абсолютный псевдоэлемент

Цвет фона, проходящий через позицию: абсолютный псевдоэлемент

Кажется, вы на правильном пути, возможно, у вас есть идея, что в hove есть градиент в конце, чтобы избежать проблемы с углом, которая, похоже, является старой проблемой, которая никогда не решалась браузерами.

Somelight 31.03.2021 19:58

Я не мог понять, как решить эти углы. Вот код, если кто-то хочет поиграть: codepen.io/cisco_iz/pen/eYggzVW?editors=1100 Я думаю, это известно как проблема субпикселей. Подробнее об этом здесь: johnresig.com/blog/sub-pixel-problems-in-css

cisco 31.03.2021 20:15
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
34
0

Другие вопросы по теме