CSS - 按鈕

上一頁
下一頁

按鈕是互動式元素，允許使用者在您的網站或應用程式上執行操作。按鈕通常呈矩形或圓形，並帶有文字標籤，說明單擊時會發生什麼。

在瀏覽網頁時，您可能遇到過各種互動式元素，例如提交按鈕。在本文中，我們將介紹如何使用 CSS 樣式化按鈕，探索不同型別的按鈕，並討論相關屬性。

目錄


 

如何在 CSS 中設定按鈕樣式？

  • 設定尺寸：在 CSS 中，height 和 width 屬性可用於調整網頁中按鈕的大小。
  • 定義顏色和邊框：與 UI 相容的顏色和邊框以及合適的厚度使按鈕脫穎而出。background-color 和 border 屬性可用於設定 css 中任何按鈕的顏色和邊框。
  • 陰影效果：使用 box-shadow 屬性在按鈕周圍新增陰影效果可以增強按鈕樣式。
  • 懸停效果：互動式樣式（如懸停效果）會在使用者將滑鼠懸停在按鈕上時更改按鈕的樣式。這可能包括更改不透明度、大小（使用轉換）等。
  • 動畫按鈕：CSS animation 可用於建立動態互動式按鈕。

設定按鈕顏色

如上所述，我們可以在 CSS 中使用 background-color 屬性為按鈕提供正確的顏色。檢視示例

示例

在此示例中，我們使用與背景顏色 UI 匹配的不同 顏色 樣式化按鈕。

<!DOCTYPE html> 
<html>

<head>
    <style>
        body{
            background: black;
            padding: 40px;
        }
        button {
            padding: 20px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button style="background: #FFD700">
        Yellow Button
    </button>
    <button style="background: #00FFFF">
        Blue Button
    </button>
    <button style="background: #FFFFFF">
        White Button
    </button>
    <button style="background: #FF4500">
        Orange Button
    </button>
    <button style="background: #32CD32">
        Lime Button
    </button>
</body>

</html>

設定按鈕邊框

邊框是按鈕邊緣周圍的空間。我們可以使用 border 屬性為按鈕邊框設定樣式。

border 屬性採用三個值：邊框厚度、型別和顏色。

示例

以下是如何使用以下方法建立具有不同邊框顏色的按鈕的示例：

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
        }
        .style1 {
            border: 3px solid darkred;
        }
        .style2 {
            border: 3px solid gold;
        }
        .style3 {
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <button class="style1">
        darkred border
    </button>
    <button class="style2">
        gold border
    </button>
    <button class="style3">
        black border
    </button>
</body>

</html>

建立圓角按鈕

我們可以使用 border-radius 屬性建立圓角按鈕或完全圓形的按鈕。

/* Round cornered button */
border-radius: 10px;

/* Circular button */
border-radius: 50%;

示例

以下是如何建立圓角按鈕的示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }
        .style1 {
            border-radius: 10px;
            background-color: violet;
        }
        .style2 {
            border-radius: 20px;
            background-color: pink;
        }
        .style3 {
            border-radius: 50%;
            background-color: violet;
        }
</style>
</head>

<body>
    <button class="style1">
        Border-radius: 10px;
    </button>
    <button class="style2">
        Border-radius: 20px;
    </button>
    <button class="style3">
        Circle
    </button>
</body>

</html>

按鈕懸停效果

在不點選按鈕的情況下將滑鼠指標移到按鈕上方稱為懸停。我們可以使用 :hover 偽類 為按鈕的懸停狀態設定樣式。

button:hover{
    property: value;
}

示例

以下是如何建立按鈕懸停效果的示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
            background-color: #1156b3; /* Darker blue */
        }
        .style1:hover {
            background-color: #0069d9; /* Slightly darker blue */

        }
        .style2:hover {
            transform: scale(1.2); /* Size increase effect */
        }
        .style3:hover {
            background-color: lightblue; 
        }
    </style>
</head>

<body>
    <button class="style1">
        Button 1
    </button>
    <button class="style2">
        Button 2
    </button>
    <button class="style3">
        Button 3
    </button>
</body>

</html>

按鈕焦點和啟用狀態樣式

按鈕的焦點狀態是在按鈕獲得焦點時的狀態，通常是在單擊或使用 Tab 鍵切換到它之後。按鈕的啟用狀態是在單擊按鈕時的狀態。我們可以使用 偽類 :focus. 和 :active 為這些狀態設定樣式。

button:focus {
    property: value;
}
button:active {
    property: value;
}

示例

以下是如何設定按鈕的焦點狀態和啟用狀態的示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
    .style-button {
        display: inline-block;
        padding: 15px;
        background-color: pink;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.1s ease;
    }
    .style-button:hover {
        background-color: violet;
    }
    .style-button:focus {
        outline: none;
        box-shadow: 0 0 5px 2px blue;
    }
    .style-button:active {
            transform: translateY(2px);
            background-color: yellow;
        }
    </style>
</head>

<body>
   <button class="style-button">Press Me</button>
</body>

</html>

在按鈕上設定陰影效果

在 CSS 中，box-shadow 屬性用於在按鈕周圍新增陰影效果。

盒陰影由相對於元素的水平和垂直偏移量、模糊和擴充套件半徑以及顏色描述。以下是 box-shadow 的語法

button { 
    box-shadow: inset horizontal vertical
                blur-radius spread-color; 
}

示例

以下是如何建立帶有投影的按鈕的示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

       .style1 {
          background-color: pink;
          box-shadow: 0 5px 10px 0 red; 
       }
       .style2 {
          background-color: yellow;
       }
       .style3:hover {
          background-color: yellow;
          box-shadow: 0 5px 10px 0 orange;
       }
    </style>
</head>

<body>
    <button class="style1">
        Button 1
    </button>
    <button class="style2">
        Button 2
    </button>
    <button class="style3">
        Button 3
    </button>
</body>

</html>

停用按鈕

停用按鈕是指不可點選的按鈕。滿足某些條件後，可以使用 JavaScript 啟用此按鈕。

我們可以透過將 cursor 屬性設定為 not-allowed 來建立停用按鈕。

示例

以下是一個示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

        .style1 {
            background-color: pink;
            cursor: pointer;
        }
        .style2 {
            background-color: yellow;
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button class="style1">
        Normal Button
    </button>
    <button class="style2">
        Disabled Button
    </button>
</body>
</html>

設定按鈕寬度

我們可以使用 width 屬性定義按鈕的水平寬度。

示例

以下是如何建立具有不同寬度的按鈕的示例。

<!DOCTYPE html> 
<html>
<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

       .style1 {
          background-color: pink;
          width: 200px;
       }
       .style2 {
          background-color: violet;
          width: 50%;
       }
       .style3 {
          background-color: yellow;
          width: 100%;
       }
    </style>
</head>

<body>
    <button class="style1">
        width 100px
    </button><br>
    <button class="style2">
        width 50%
    </button><br>
    <button class="style3">
        width 100%
    </button><br>
</body>

</html>

CSS 按鈕組

以下是如何透過刪除邊距併為每個按鈕新增 float: left 屬性來建立水平按鈕組的示例。

示例

<!DOCTYPE html> 
<html>
<head>
    <style>
       .button-group {
          display: flex; 
          justify-content: center;
          float: left; 
       }
       .style-button {
          background-color: yellow;
          border: none;
          padding: 10px 20px;
          float: left;
          text-align: center;
          text-decoration: none;
          font-size: 16px;
       }
       .style-button:hover {
          background-color: orange;
       }
    </style>
</head>
<body>
   <div class="button-group">
      <button class="style-button">Submit</button>
      <button class="style-button">Cancel</button>
      <button class="style-button">Reset</button>
   </div>
</body>
</html>

CSS 垂直按鈕組

以下是如何透過設定 display: block 和 float: left 屬性來建立垂直按鈕組的示例

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
    .button-group { 
        justify-content: center;
        float: left; 
    }
    .style-button {
        background-color: yellow;
        border: 2px solid orange;
        padding: 10px 20px;
        text-align: center;
        display: block;
        text-decoration: none;
        font-size: 16px;
        width: 100px; 
    }
    .style-button:hover {
        background-color: violet;
    }
    </style>
</head>

<body>
    <div class="button-group">
        <button class="style-button">Home</button>
        <button class="style-button">Blog</button>
        <button class="style-button">Setting</button>
    </div>
</body>

</html>

CSS 圖片上的按鈕

以下是如何使用相對定位將按鈕覆蓋在影像上的示例

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        img {
            width: 300px;
            height: 200px;
        }
        button {
            position: absolute;
            top: 40%;
            left: 30%;
            background-color: yellow;
            border: none;
            padding: 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 15px; 
        }
        button:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src="/css/images/tree.jpg" alt="Your Image">
        <button>Click Me</button>
    </div>
</body>

</html>

CSS 動畫按鈕

在 CSS 中，我們可以使用 偽元素 來為按鈕單擊效果製作動畫。

示例

以下是如何在按鈕上建立動畫效果的示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            display: inline-block;
            padding: 15px;
            background-color: violet;
            border: none;
            text-align: center;
            text-decoration: none;
            font-size: 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        button::before {
            content:"";
            position: absolute;
            width: 0;
            height: 100%;
            top: 0;
            left: 0;
            background-color: pink;
            transition: width 0.3s ease-in-out;
        }
        button:hover::before {
            width: 100%;
        }
        .icon::after {
            content: '\2192'; 
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <button>
        Hover Me <span class="icon"></span>
    </button>
</body>
</html>
列印頁面
上一頁
下一頁
廣告