Блог

Главная - Вопросы по программированию - Почему после перехода все еще сохраняется фон?

Почему после перехода все еще сохраняется фон?

#css

Вопрос:

Я сделал эту кнопку, которая при наведении переходит в ::перед тем, как изменить внешний вид кнопки. Это прекрасно работает, когда границы нет, но когда добавляется граница, она оставляет немного фона.

 .submit-button {
        font-size: 16px;
        color: #FFFFFF;
        background-color: red;
        padding: 14px 16px;
        border: 3px solid #FFFFFF;
        transition: color 300ms cubic-bezier(0.3, 1, 0.8, 1);
        border-radius: 24px;
        cursor: pointer;
         position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        border-radius: 24px;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
    }

    .submit-button:hover::before {
        transform: scaleX(1);
    }

    .log-out-button:hover {
        color: red
    }
    
    div {
      background-color: red
    } 
 <div><button class="submit-button log-out-button">hello</button></div>

Ответ №1:

Немного другой внешний вид, но вы могли бы упростить свой CSS и решить проблему с радиусом границы, в зависимости от overflow: hidden стиля и того, чтобы цвет фона вашего преобразования заполнял пространство фигуры (по сути, выходя за границу).

 .submit-button {
        font-size: 16px;
        color: #FFFFFF;
        background-color: red;
        padding: 14px 16px;
        border: 3px solid #FFFFFF;
        border-radius: 24px;
        cursor: pointer;
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin: 4px;
    }

    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
    }

    .submit-button:hover::before {
        transform: scaleX(1);
    }

    .log-out-button:hover {
        color: red
    }
    
    div {
      background-color: red
    } 
 <div><button class="submit-button log-out-button">hello</button></div>
Метки: