HTML 填充背景颜色问题
我的问题涉及“详细信息”按钮的背景颜色。我遇到的问题是并非所有按钮区域都填充了颜色。按钮图片
<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;
}
白衣非少年浏览 42回答 1
1回答
-
萧十郎
按钮周围的灰线是由于 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>
随时随地看视频慕课网APP
相关分类
Html5
