按鈕是為任何網絡應用程序提供交互性的最常見方式。但我們經常傾向于使用其他HTML元素，如 div span 等作為 clickable 元素。

但通過這樣做，我們錯過了許多內置瀏覽器的功能。

我們缺少什么？

• 無障礙問題（空格鍵或回車鍵無法觸發按鈕點擊）。
• 元素將無法通過按Tab鍵來聚焦。

權宜之計

我們需要在每次創建可點擊的 div 按鈕時，以編程方式添加所有這些功能。

更好的解決方案

始終優先使用 button 作為可點擊元素，以獲取瀏覽器的所有內置功能，如果你沒有使用它，始終將上述列出的可訪問性功能添加到你的div中。

雖然，直接使用按鈕并不直觀。我們必須添加并修改一些默認的CSS和瀏覽器自帶的行為。

使用按鈕的注意事項

1、它自帶默認樣式

我們可以通過將每個屬性值設置為 unset 來取消設置現有的CSS。

我們可以添加 all:unset 一次性移除所有默認樣式。

在HTML中，我們有三種類型的按鈕。 submit, reset and button. 默認的按鈕類型是 submit.

無論何時使用按鈕，如果它不在表單內，請始終添加 type='button' ,因為 submit 和 reset 與表格有關。

2、請不要在按鈕標簽內部放置 divs

我們仍然需要添加 cursor:pointer 以便將光標更改為手形。

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。