设置按钮样式的正确方法

设置按钮样式的正确方法如果您正在构建网站或Web应用程序，您可能正在使用按钮，也许是看起来像按钮的链接。无论如何，正确显示这些内容很重要。在本教程中，我们将为和元素以及自定义.btnCSS组件创建基本样式。您将找到该过程的每个步骤的演示页面。重置样式通常，网站或应用程序中99.9%的可点击元素应该是或元素。如果您不确定在给定情况下使用什么元素：使用链接(...)如果它转到不同的URL或更改页面的大部分.否则，使用通用按钮(...)。使用正确的元素有几个优点：它对搜索引擎友好（尤其是链接！），它与键盘导航配合得很好，并且它提高了所有用户的可访问性。尽管如此，开发人员很少使用元素。在整个网络上，我们可以看到许多触发JavaScript操作的按钮，仔细观察它们是用

、或编码的。为什么

元素如此不受欢迎？知识点：很多开发者都不知道（学习100+HTML元素需要一点时间）。样式：带有复杂的默认样式，很难实现自定义外观。幸运的是，样式部分可以修复！/***重置按钮样式。*要获得中性外观需要一些工作。*/按钮{填充：0;边框：无；字体：继承；颜色：继承；背景颜色：透明；/*悬停时显示手形光标；有些人认为我们应该保留按钮的默认箭头光标*/cursor:pointer;}我们最终得到的按钮看起来像普通文本。这种方法的缺点是现在我们必须设置所有按钮的样式，否则用户将无法识别它们。另一种选择是将此样式用作混合（使用Sass或其他预处理器）并有选择地应用它：@mixinbutton-reset{padding:0;边框：无；字体：继承；颜色：继承；背景色：透明；光标：指针；}.my-custom-button{@includebutton-reset;填充：10px；background-color:skyblue;我使用默认的浏览器样式我正在使用自定义样式编写一个“按钮”CSS组件现在我们已经删除了默认样式，让我们定义我们自己的按钮样式。这是我们想要做的：一个可以应用于链接或按钮的“按钮”样式；我们想有选择地应用它，因为我们的页面中会有其他链接和按钮样式。这需要一个CSS组件。CSS组件是我们可以使用类应用的一种样式或样式集合，通常位于几种不同类型的HTML元素之上。您可能熟悉Bootstrap或Foundation等CSS框架中的这个概念。我们称这个组件为.btn（就像Bootstrap，但我们只设置颜色和大小以保持简单）。.btn{/*默认为，但对有用*/display:inline-block;文本对齐：居中；文字修饰：无；/*当按钮在2行上换行时创建一个小空间*/margin:2px0;/*不可见边框（将在悬停/焦点时着色）*/border:solid1pxtransparent;边界半径：4px；/*大小来自文本和填充（无宽度/高度）*/padding:0.5em1em;/*确保颜色有足够的对比度！*/颜色：#ffffff；background-color:#9555af;}这是我们的按钮组件的样子：您可能想知道为什么差异如此明显。第二排按钮看起来不错，谁不喜欢柔和的外观呢？悬停、焦点和活动样式很酷，您的按钮看起来不错，但是……用户将与其进行交互，并且当按钮的状态发生变化时他们需要视觉反馈。浏览器为“焦点”和“活动”（即按下）状态设置了默认样式，但通过重置按钮样式，我们已经删除了其中的一些样式。我们还想为鼠标悬停设置样式，总的来说，我们希望可见样式与我们的设计相匹配。让我们从以下主题开始：活动状态，即单击按钮或链接：/*clic+colortweak上的老式“向下”效果*/.btn:active{transform:translateY(1px);filter:saturate(150%);}我们可以更改按钮的颜色，但我想为我们的鼠标悬停样式保留这种效果：/*鼠标悬停时反转颜色*/.btn:hover{color:#9555af;边框颜色：currentColor；background-color:white;}现在让我们添加一些焦点样式。您的网站或网络应用程序的用户可以使用键盘或虚拟键盘（在iOS和Android上）“”并激活表单字段、按钮、链接和其他交互元素。对于某些用户，它可以加快缓慢的交互，例如填写表格。对于其他人，不可能或很难使用鼠标或触控笔。他们依靠使用键盘或专用设备访问网站。在我见过的大多数Web项目中，设计者指定了预期的鼠标悬停样式，而不是焦点样式。我们应该做什么？一个简单的解决方案是重用:hover样式作为我们的焦点样式：边框颜色：currentColor；background-color:white;}一旦你有了这个可见的焦点样式（而不是之前！），你可能想要删除浏览器的默认按钮样式：.btn{/*...*//*所有浏览器：删除默认轮廓，因为我们正在滚动我们自己的焦点样式*/outline:none;}/*Firefox:删除焦点上显示的内部边框*/.btn::-moz-focus-inner{border:none;}在试试看这里;如果您使用的是台式计算机，请使用Tab和Shift+Tab键在按钮之间导航：处理焦点样式还有另一个棘手的问题。在一些浏览器中，当您单击链接或按钮时，将应用两个伪类：:active:focus一旦您停止按下鼠标按钮或触控板，“active”伪类将停止应用。但在某些浏览器中，焦点样式会一直保持到用户单击页面上的其他内容为止。在我的测试中，受影响的浏览器包括Chrome(66)、Edge(16)和Firefox（60，仅用于链接）。Safari(11.1)似乎更聪明，避免了这个问题。我们可以通过使用新的::focus-visible伪类（规范草案）来解决这个问题。此功能未完全指定，但想法是浏览器只能在键盘或类似键盘的交互之后设置：:focus-visible，而不是单击。由于它还没有被浏览器实现，我们必须用JavaScript来实现它，就像一些polyfill一样。它在整个页面上运行，并且仅在使用键盘时将焦点可见类设置为接收焦点的元素。让我们更改样式以分离:hover和:focus样式：/*悬停时反转颜色*/.btn:hover{color:#9050AA;边框颜色：currentColor；background-color:white;}/*确保我们有一个可见的对焦环*/.btn:focus{outline:none;box-shadow:0003pxrgba(255,105,180,0.5),0001.5pxrgba(255,105,180,0.5);}现在，在页面中包含focus-visible.js脚本之后，它向元素添加了一个js-focus-visible类。我们可以使用它从没有焦点可见类的焦点元素中删除焦点样式：/*如果不是来自键盘导航，则隐藏焦点样式*/.js-focus-visible.btn:focus:not(.focus-visible){box-shadow:none;}一个更简单的解决方案是只为focus-visible类声明焦点样式，但是如果polyfill不活动（例如，如果我们的JS加载失败）。关注我的微信公众号，更多优质文章会定期推送