带有填充的HTML背景色问题

Question

我的问题与“详细信息”按钮的背景色有关。我遇到的问题是，并非所有按钮区域都用颜色填充。 button pic

<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;
    }

Answer 1

删除此行代码

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