如何更好的控制按钮样式

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在Web页面或应用程序中都可能会有按钮的出现,甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢?在这篇文章中,我们一起来聊聊按钮样式应该怎么才能更好的控制。

重置按钮的样式

平时在Web中添加一个按钮,大多数的时候都会使用<a><button>标签,也有的时候会使用<input type="button">。随着移动端的出现,更多的人喜欢使用<div>标签来添加按钮,而事实上,HTML中的任何一个标签元素都可以是用来写一个按钮。虽然写一个按钮的标签元素没有过严格的要求,不过个人更建议写按钮的时候采用<a>标签或者<button>标签,出于这样的考虑主要还是因为标签的语义化来做的考虑。

至于在Web中应该使用<a>还是<button>标签或者说其他的HTML标签来写一个按钮呢?在社区也有过相应的讨论,只不过在这篇文章中不想做过多的阐述,如果你感兴趣的话,可以花点时间阅读下面几篇文章:

事实上,在Web网站或应用程序中近99.9%的可点击内容都是<a><button>元素。如果你不确定在给定的情况下应该使用什么元素的话,可以参考下面的建议:

  • 如果需要跳转到新的页面或更改页面的大部分内容,建议使用<a>元素
  • 否则,更建议使用button元素(或者<input type="button">

为什么要这么用呢?主要是出于HTML的语义化做考量,而且这样做更有利于SEO。除此之外也能更好的配合键盘做相应的操作,更利于提高用户的可访问性。尽管如此,开发人员很少使用<button>元素。特别是在移动端的开发中,更多的开发人员更喜欢使用<div><span><a>这样的元素。

为什么会有这方面的现象呢?主要是因为:<button>元素带有复杂的默认样式(特别是在不同的浏览器中略有不同),这样一来也增加了样式难于维护。幸运的是,我们可以在reset.css样式文件中重置<button>的样式,让所有客户端初始的样式更趋于统一,也更利用按钮样式的美化:

button {
    padding: 0;
    border: none 0;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

这样一来,按钮在Web上看上去就像是一个文本。像下图这样:

这样做,虽然样式上在不同的客户端趋于统一(看上去更像文本)。但这样一来,我们就必须对所有按钮添加样式,否则用户将无法识别它们。

给按钮添加样式

现在我们已经重置了<button>元素在各客户端下的样式,让他们都趋于统一。但按钮毕竟是按钮,和文本是不一样的(样式上看上去应该是不一样的),因此我们就需要给其添加自己定义样式(根据你的需求来添加)。比如下面这样的示例代码:

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    text-decoration: none; /*for <a> link*/

    margin: 2px;

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/style-button-right-way.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部