这是我在 StackOverflow 上提出的问题,但不知何故没有得到我希望的答复。我现在在这里尝试,因为我正在寻找一种视觉上吸引人的解决方案。理想情况下,使用图书馆会很棒。
在我的网站33hotels.com 上,我使用按钮(例如 Twitter Bootstrap 提供的)来指示酒店的便利设施。
我需要的是清楚地表明没有便利设施。为此,我已经将按钮显示为红色,其中的文本被水平线穿过。但是,从用户测试反馈来看,这还不足以传达没有便利设施的信息。所以我需要更清楚的东西。
我正在考虑在按钮顶部放置一个大十字(字母“X”或图标),它应该与按钮一样大,并且很好地覆盖按钮,而不会伸出。十字应该很薄,以免遮挡文字,但仍清晰可见。
我的问题是:
如何在按钮顶部放置“X”?有什么优雅且可重复使用的方法吗?也许定义一个可以附加到 HTML 元素的 Web 组件(或 Angular 指令)“交叉”?
这是我想要实现的丑陋版本。然而,除了丑陋之外,它无法使交叉的文本可读。所以也许我应该使用更薄的“X”版本?
编辑。受 E. Upvoter 先生建议的启发,将颜色更改为灰色并添加了“X”,悬停时外观更清晰。该按钮在单击自身时消失(而不仅仅是在“X”上),以提高难以单击小图标的人的可用性。非常感谢所有建议!