我的问题涉及“详细信息”按钮的背景颜色。我遇到的问题是并非所有按钮区域都填充了颜色。按钮图片<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;}
1 回答
萧十郎
TA贡献1815条经验 获得超12个赞
按钮周围的灰线是由于 css 中的“边框”设置造成的。
可以通过进行以下更改来删除它：
从“div”级别删除边框 ( .DetailsBtn )
将边框添加到“.DetailsBtn a”
将边框添加到“.DetailsBtn a: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 回答
- 0 关注
- 80 浏览
添加回答
举报
0/150
提交
取消