我的問題涉及“詳細信息”按鈕的背景顏色。我遇到的問題是并非所有按鈕區域都填充了顏色。按鈕圖片<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條經驗 獲得超13個贊
按鈕周圍的灰線是由于 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 關注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消