HTML проблема цвета фона с заливкой - PullRequest
Новая
       1

HTML проблема цвета фона с заливкой

0 голосов
/ 10 апреля 2020

Мой вопрос касается цвета фона кнопки «ДЕТАЛИ». Проблема, с которой я столкнулся, состоит в том, что не вся область кнопки заполнена цветом. кнопка пи c

<div className={classes.DetailsBtn}>
    <a href="">
       Details
    </a>
</div>

.DetailsBtn {
    flex: 0 0 10%;
    text-align: center;
    border: 1px solid rgba(3, 37, 65, 0.25);
}
    .DetailsBtn a {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-transform: uppercase;
        line-height: 26px;
        text-decoration: none;
        background: #032541;
        color: #fff;
        transition: all 0.5s;
    }
    .DetailsBtn a:hover {
        background: #fff;
        color: #032541;
    }

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Серая линия вокруг кнопки вызывается из-за настройки 'border' в css.

. Ее можно удалить, внеся следующие изменения:

  1. Удалить граница от уровня 'div' ( .DetailsBtn )
  2. Добавить границу к '. DetailsBtn a'
  3. Добавить границу к ' .DetailsBtn: hover '

Рабочий код: 

<!DOCTYPE html>
<html>
    <head>
        <title>Button colour</title>
        <style>
            .DetailsBtn {
                flex: 0 0 10%;
                text-align: center;
            }
            .DetailsBtn a {
                display: inline-block;
                width: 100%;
                height: 100%;
                font-size: 14px;
                text-transform: uppercase;
                line-height: 26px;
                text-decoration: none;
                background: #032541;
                color: #fff;
                transition: all 0.5s;
                border: 1px solid rgba(3, 37, 65, 0.25);
            }
            .DetailsBtn a:hover {
                background: #fff;
                color: #032541;
                border: 1px solid rgba(3, 37, 65, 0.25);
            }
        </style>
    </head>
    <body>
        <div class="DetailsBtn" style="width:200px;">
            <a href="#">
               Details
            </a>
        </div>
    </body>
</html>
1 голос
/ 10 апреля 2020

Удалить эту строку кода 

.DetailsBtn {
flex: 0 0 10%;
text-align: center;
border: 1px solid rgba(3, 37, 65, 0.25);  <-- remove this line!
}
...