LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS 按鈕產生器

站方自行規劃沒找到想要的工具？

用即時預覽與可複製的程式碼打造可自訂的 CSS 按鈕

視覺化地設計按鈕，並複製乾淨的 HTML 與 CSS。在瀏覽器裡調整顏色、外框、圓角、間距、陰影以及懸停與聚焦樣式。

懸停與聚焦

預覽

把游標移到預覽上，或按 Tab 鍵移動到它，就能看到懸停與聚焦樣式。

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

程式碼使用真正的 <button>，並保留看得見的 :focus-visible 外框。拿掉這個外框，用鍵盤操作的人就無從得知自己在哪裡。

預覽與產生的程式碼都在你的瀏覽器裡建立。

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

這是一個針對單一按鈕的視覺化編輯器：顏色、外框、圓角、內距、字級與字重、陰影，以及懸停時會有什麼變化。預覽所用的樣式就是你複製的那段 CSS，所以把游標移上去或用 Tab 鍵跳過去，看到的是真實狀態而非近似效果。有兩件事沒有聽天由命。標記是真正的 `<button type="button">`，不是加了樣式的 div，因此天生可聚焦、可用鍵盤操作。而且輸出始終保留看得見的 `:focus-visible` 外框——產生式按鈕 CSS 裡最常見的無障礙缺陷，就是那句讓鍵盤使用者完全不知道自己身在頁面何處的 `outline: none`。

使用方式

  1. 設定按鈕文字與類別名稱，然後選好背景、文字與外框的顏色。
  2. 調整圓角、外框寬度、內距以及字級與字重，直到預覽滿意為止。
  3. 設定懸停背景與聚焦外框色，然後複製 HTML 與 CSS。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

可以做懸停樣式嗎？
可以。懸停背景、選用的上浮效果與陰影變化都在產生的 CSS 裡，是一條獨立的 :hover 規則，你之後還能繼續修改。
這個按鈕需要 JavaScript 嗎？
不需要。輸出就是普通的 HTML 與 CSS。只有當你要決定按下之後做什麼時，才需要指令碼。
HTML 與 CSS 能分開複製嗎？
能——兩者各有自己的複製按鈕，你可以把 CSS 放進樣式表，把標記放到該放的位置。
為什麼 CSS 裡帶有聚焦外框？
因為沒有它，用鍵盤瀏覽的人就看不出自己正停在哪個控制項上。產生的規則使用 :focus-visible，因此外框只在鍵盤聚焦時出現，不會每次點滑鼠都冒出來。
產生的程式碼是本機的嗎？
是的。所有設定、預覽與產生的程式碼片段都留在你的瀏覽器裡。

回到全部工具