如何使用Flexbox CSS设计按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (80)

我试图在Flexbox代码中设置历史按钮的样式,以匹配Nav条链接的样式。我似乎无法得到悬停,活动,访问,链接CSS代码应用于整个按钮。此外,这个链接在Firefox中完全没有打开,而是打开到Chrome和MSEdge中的历史页面。

 .card .text > button {
background: #6e6b5c;
border: 0;
font-family: 'Days One', sans-serif;
font-weight: normal;
color: lightgrey;
/*text-decoration: none;*/
padding: 10px;
width: 100%;
}

.card > button a {
text-decoration: none;

}

.card > button a:link, button a:visited {
background: #6e6b5c;
color: lightgrey;
text-decoration: none;
}

.card > button a:hover, button a:active {
    background-color: #7d654b;
    color: white;   
    text-decoration: none;
}
提问于
用户回答回答于

这是我为组件样式所做的:

a[href="history.html"] {

color: white;

text-decoration: none; }

另外,是否有必要使用<button>标签? <a>标签?像这样

<a href="something.html" class="btn">Something</a>

然后CSS

a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}

所属标签

可能回答问题的人

  • 腾讯云数据库 TencentDB

    腾讯云 · 产品团队 (已认证)

    302 粉丝2 提问51 回答
  • EatRice

    17 粉丝0 提问183 回答
  • 华讯云

    1 粉丝0 提问156 回答
  • 成都加米谷大数据

    11 粉丝0 提问16 回答

扫码关注云+社区

领取腾讯云代金券