本篇文章以草稿形式发布，这意味着我可以及时获得反馈，说不定还能治好我的完美强迫症(也许两种原因兼而有之)。草稿完成度为中级:)，如有遗漏请见谅。
说说按钮吧。假如你正在搭建一个网站或web应用，那一定会用到不少按钮或者链接。或许是看起来像按钮的链接?又或者类似按钮的可点击区域?无论如何，正确使用它们很重要。
提示:始终使用<a>和<button>
为你的可点击区域选择正确的HTML元素十分重要，有一大堆理由可以佐证这一点。下面列出两个:
真实的按钮和链接，使用正确的元素，可以使用键盘导航。你的某些用户需要这样使用网站或app: 他们能使用键盘导航(或其他输入方式)，进而获得页面或页面某部分所有链接中的一个链接等等。而对其他用户而言，这加快了他们的工作流程。譬如在一个登录表单中他们可以点击第一个输入框，然后使用Tab键控制跳到下一个输入框直至按钮。
如果你使用
<div>或<span>来“链接”你的内容，搜索引擎无法发现这类假链接。
让我们放弃把类似div或span等通用元素作为可点击区域，或者唤起动作以及_按钮_和_链接_。但有两个元素我们绝对应该使用:a和button。
如果你不确定在某个场景下该使用哪种元素，试试下面的建议:
如果要跳转到其他地方，使用链接:
<a href>`...`</a>如果是其他情况，就用按钮:
<button>`...`</button>
编写<a>和<button>的样式
开发者可能会使用<div>或<span>作为按钮，这是因为他们发现很难给正确的元素设置样式。
需要指出的是，<button>元素拥有浏览器默认样式，这让设置特定样式变得有点麻烦。
/* Reset link styles (underline only; if you _really_ need to make links invisible you could use color:inherit too) */a { text-decoration: none;
}/* Reset button styles; buttons have more default styles, so it takes more work to achieve a “blank slate” look. */button { padding: 0; border: none; font: inherit; color: inherit; background-color: transparent;
}完成了这一步，你_应该_设置样式代码来实现链接和按钮的特定样式。例如你可以创建一个叫btn的组件，并使用一个可以应用于链接和常规按钮的相同类名。
.btn { /* default for `<button>`, but useful for `<a>` */
display: inline-block; /* create a small space when buttons wrap on 2 lines */
margin: 2px 0; padding: 0.5em 1em; border-radius: 4px; /* if the button text wraps on 2 lines, center the text */
text-align: center; color: #FFFFFF; background-color: #7744AA; /* let’s use the hand cursor for `<button>` too */
cursor: pointer;
}将这段代码应用于<a>或<button class="btn">，二者应该呈现相同的样式。
嗨，我是链接 ，当然也算一个按钮。
按钮样式 - 扁平化，有色背景加上白色文本 - 这很普遍，但请确定你的文本和背景颜色的对比度足以使大多数用户阅读起来更舒适。
为了对比，请看一个对比度不足的例子。
低对比度设计会导致某些用户无法正常阅读，而且大部分用户都会出现阅读困难的情况。
改变聚焦样式
Still writing this part :)这部分内容还未完成:)
共同学习，写下你的评论
评论加载中...
作者其他优质文章
