使用 HTML 和 CSS 建立動畫藥丸形按鈕

藥丸形按鈕是一種圓角、外觀美觀的按鈕。按鈕可以具有過渡和懸停效果，使其體驗更具吸引力和流暢性。我們將使用 CSS 中的過渡來建立平滑的懸停效果。這種型別的按鈕設計可用於各種目的，例如登錄檔單、號召性用語按鈕等。

作為一種替代實現方法，一些開發人員可能會選擇使用 JavaScript 來建立動畫按鈕，這可以提供更高階的動畫效果和互動功能。但是，這種方法可能需要額外的程式設計技能，並且還會增加網站的載入時間。

演算法

  • 定義網頁的視口。

  • 編寫 CSS 程式碼來設定按鈕的樣式。

  • 定義一個名為“button”的類用於樣式設定，併為按鈕建立藥丸形狀。

  • 將按鈕的背景顏色設定為 #ddd，邊框設定為無，顏色設定為黑色，頂部和底部的填充設定為 10px，左右填充設定為 20px。

  • 使用 text-align 屬性居中文字，刪除文字裝飾，並將按鈕顯示為內聯塊。

  • 在按鈕的頂部和底部新增 5px 的邊距，在左右新增 3px 的邊距。

  • 新增 20px 的邊框半徑，使按鈕看起來像藥丸形狀。

  • 使用 CSS 中的 :hover 偽類為按鈕新增懸停效果。

  • 當用戶將滑鼠懸停在按鈕上時，將背景顏色更改為 #f1f1f1，並新增持續時間為 0.5 秒的過渡效果。

  • 新增一個 h2 標籤，其中包含文字“藥丸按鈕”。

  • 使用 button 類建立兩個按鈕：按鈕 1 和按鈕 2。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*buttons are styled and a pill shape is created*/
.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 5px 3px;
  border-radius: 20px;
}
/*Adding hover effect to the button*/
.button:hover {
  background-color: #f1f1f1;
  transition-duration: 0.5s;
}
</style>
</head>
<body>

<h2>Pill Buttons</h2>
<!-- Define buttons with button class -->
<button class="button">Button 1</button>
<button class="button">Button 2</button>

</body>
</html>

結論

藥丸形按鈕通常用於網站、移動應用程式以及作為定向連結。這些按鈕還可以傳達互動性和響應性，使網站感覺更具活力和吸引力。但是，建立動畫按鈕也可能存在一些限制，例如增加網站的載入時間，這可能會影響使用者體驗。

使用 HTML 和 CSS 建立此動畫藥丸形按鈕的一些限制包括

  • 瀏覽器相容性：動畫效果可能無法在所有 Web 瀏覽器中正確顯示或可能不受支援。

  • 載入時間：動畫按鈕會增加網站的載入時間，這會影響使用者體驗，尤其是在網路連線較慢的情況下。

  • 互動性有限：HTML 和 CSS 在建立互動功能（例如懸停效果或點選動畫）方面存在一些限制。

  • 響應式設計：按鈕的設計和動畫效果可能無法在不同的裝置或螢幕尺寸上正確縮放。

更新於： 2023年8月18日

1K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告