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>
打印页面
上一页
下一页
广告