CSS - 按钮

按钮是交互式元素，允许用户在您的网站或应用程序上执行操作。按钮通常呈矩形或圆形，并带有文本标签，说明单击时会发生什么。

在浏览网页时，您可能遇到过各种交互式元素，例如提交按钮。在本文中，我们将介绍如何使用 CSS 样式化按钮，探索不同类型的按钮，并讨论相关属性。

如何在 CSS 中设置按钮样式？

设置尺寸：在 CSS 中，height 和 width 属性可用于调整网页中按钮的大小。
定义颜色和边框：与 UI 兼容的颜色和边框以及合适的厚度使按钮脱颖而出。background-color 和 border 属性可用于设置 css 中任何按钮的颜色和边框。
阴影效果：使用 box-shadow 属性在按钮周围添加阴影效果可以增强按钮样式。
悬停效果：交互式样式（如悬停效果）会在用户将鼠标悬停在按钮上时更改按钮的样式。这可能包括更改不透明度、大小（使用转换）等。
动画按钮：CSS animation 可用于创建动态交互式按钮。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

设置按钮颜色

如上所述，我们可以在 CSS 中使用 background-color 属性为按钮提供正确的颜色。查看示例

示例

在此示例中，我们使用与背景颜色 UI 匹配的不同颜色样式化按钮。

Open Compiler

<!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 属性采用三个值：边框厚度、类型和颜色。

示例

以下是如何使用以下方法创建具有不同边框颜色的按钮的示例：

Open Compiler

<!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%;

示例

以下是如何创建圆角按钮的示例。

Open Compiler

<!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;
}

示例

以下是如何创建按钮悬停效果的示例。

Open Compiler

<!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;
}

示例

以下是如何设置按钮的焦点状态和激活状态的示例。

Open Compiler

<!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; 
}

示例

以下是如何创建带有投影的按钮的示例。

Open Compiler

<!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 来创建禁用按钮。

示例

以下是一个示例。

Open Compiler

<!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 属性定义按钮的水平宽度。

示例

以下是如何创建具有不同宽度的按钮的示例。

Open Compiler

<!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 属性来创建水平按钮组的示例。

示例

Open Compiler

<!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 属性来创建垂直按钮组的示例

示例

Open Compiler

<!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 图片上的按钮

以下是如何使用相对定位将按钮覆盖在图像上的示例

示例

Open Compiler

<!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 中，我们可以使用 伪元素 来为按钮单击效果制作动画。

示例

以下是如何在按钮上创建动画效果的示例

Open Compiler

<!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>

打印页面

CSS - 按钮

目录

如何在 CSS 中设置按钮样式？

设置按钮颜色

示例

设置按钮边框

示例

创建圆角按钮

示例

按钮悬停效果

示例

按钮焦点和激活状态样式

示例

在按钮上设置阴影效果

示例

禁用按钮

示例

设置按钮宽度

示例

CSS 按钮组

示例

CSS 垂直按钮组

示例

CSS 图片上的按钮

示例

CSS 动画按钮

示例