笙亿网络策划

CSS 按钮怎么设计和样式化？

约 20 分钟读完 6 阅
文章导读
Previous Quiz Next 按钮是允许用户在网站或应用上执行操作的交互元素。按钮通常呈矩形或圆形，并带有文本标签，说明点击后会发生什么。
📋 目录
  1. 一 目录
  2. 二 如何在 CSS 中样式化按钮？
  3. 三 设置按钮颜色
  4. 四 设置按钮边框
  5. 五 创建圆角按钮
  6. 六 按钮悬停效果
  7. 七 按钮焦点和激活样式
  8. 八 为按钮设置阴影效果
  9. 九 禁用按钮
  10. 十 设置按钮宽度
A A

CSS - 按钮

Previous
Quiz
Next

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

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

目录

  • 如何在 CSS 中样式化按钮？
  • CSS 按钮颜色
  • CSS 按钮边框
  • CSS 圆角按钮
  • CSS 按钮悬停效果
  • CSS 按钮焦点和激活状态
  • CSS 按钮阴影效果
  • CSS 禁用按钮
  • CSS 按钮宽度
  • CSS 按钮组
  • CSS 垂直按钮组
  • CSS 图片上的按钮
  • CSS 动画按钮

 

如何在 CSS 中样式化按钮？

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

设置按钮颜色

如上所述，我们可以使用 CSS 中的 background-color 属性为按钮设置合适的颜色。请查看示例。

示例

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

<!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 属性来创建圆角按钮或完全圆形的按钮。

/* 圆角按钮 */
border-radius: 10px;

/* 圆形按钮 */
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>

按钮悬停效果

将鼠标指针移动到按钮上方而不点击称为悬停（hovering）。我们可以使用 :hover 伪类 来样式化按钮的悬停状态。

button:hover{
    property: value;
}

示例

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

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
            background-color: #1156b3; /* 较深的蓝色 */
        }
        .style1:hover {
            background-color: #0069d9; /* 稍深的蓝色 */

        }
        .style2:hover {
            transform: scale(1.2); /* 放大效果 */
        }
        .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 通过相对于元素的水平和垂直偏移量、模糊半径、扩散半径和颜色来描述。以下是 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 中，我们可以使用 pseudo-elements 来为按钮点击效果添加动画。

示例

这是一个为按钮创建动画效果的示例

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