Css 简明教程

CSS - Buttons

Buttons 是交互式元素，允许用户对网站或应用程序执行操作。按钮通常是矩形或圆形，并带有文本标签，该标签表示单击按钮时将发生什么。

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

How to Style a Button in CSS?

Setting the Dimensions: 在 CSS 中， * height* 和 * width* 属性可用于调整网页中按钮的大小。
Define Color and Border: 具有适当厚度与 UI 兼容的颜色和边框使按钮脱颖而出。 * background-color* 和 * border* 属性可用于设置 css 中任何按钮的颜色和边框。
Shadow Effect: 使用 * box-shadow* 属性在按钮周围添加阴影效果可增强按钮样式。
Hover Effect: 交互式样式（例如悬停效果）在用户将鼠标悬停在按钮上时更改按钮样式。这可能包括不透明度、大小（使用变换）等的更改。
Animated Button: CSS * animation* 可用于创建动态交互式按钮。

Setting Buttons Colors

如上所述，我们可以使用 CSS 中的背景色属性为按钮提供合适的颜色。查看示例

Example

在这个示例中，我们使用具有不同 * colors* 的样式按钮，与背景颜色的 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>

Setting Button Borders

边框是按钮边缘周围的空间。我们可以使用 * border* 属性设置按钮边框样式。

border 属性采用三个值：边框的厚度、类型和颜色。

Example

下面是使用 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>

Creating Rounded Buttons

我们可以使用 * border-radius* 属性创建圆角按钮或圆形按钮。

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

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

Example

下面是创建圆角按钮的示例。

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

Button Hover Effect

在不单击按钮的情况下将鼠标指针移动到按钮上方称为悬停。我们可以使用 * :hover pseudo-class* 设置按钮的悬停状态样式。

button:hover{
    property: value;
}

Example

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

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

Button Focus and Active Styling

按钮的焦点状态是按钮聚焦时（通常在单击或制表时）的状态。按钮的活动状态是指按钮被单击时的状态。我们可以使用 * pseudo-class :focus.* 和 :active 设置这些状态的样式。

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

Example

下面是按钮的焦点状态和活动状态的示例。

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

Setting Shadow Effect on Button

在 CSS 中， * box-shadow* 属性用于为按钮周围添加阴影效果。

盒子阴影由相对于元素的水平和垂直偏移、模糊和扩展半径以及颜色描述。以下是盒阴影的语法：

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

Example

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

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

Disabled Buttons

禁用的按钮是不可单击的按钮。当满足某些条件时，可以使用 JavaScript 启用此按钮。

我们可以通过将 * cursor* 设置为禁止来创建禁用按钮。

Example

以下是一个示例。

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

Setting Buttons Width

我们可以使用 * width* 属性为按钮定义水平宽度。

Example

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

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

以下是如何通过移除边距并将 float: left 属性添加到每个按钮来创建水平按钮组的示例。

Example

<!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 Vertical Buttons Groups

以下是如何通过设置 display: block 和 float: left 属性来创建垂直按钮组的示例

Example

<!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 Buttons on Image

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

Example

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

在 CSS 中，我们可以使用 * pseudo-elements* 来设置按钮单击效果。

Example

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

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

Table of Contents

How to Style a Button in CSS?

Setting Buttons Colors

Example

Setting Button Borders

Example

Creating Rounded Buttons

Example

Button Hover Effect

Example

Button Focus and Active Styling

Example

Setting Shadow Effect on Button

Example

Disabled Buttons

Example

Setting Buttons Width

Example

CSS Buttons Groups

Example

CSS Vertical Buttons Groups

Example

CSS Buttons on Image

Example

CSS Animated Buttons

Example