Css 简明教程

CSS - Buttons

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

Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them.

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

While browsing web pages, you may have come across various interactive elements, such as submit buttons. In this article we will cover how to style buttons using CSS, explore different types of buttons, and discuss related properties.

How to Style a Button in CSS?

Setting the Dimensions: In CSS, height and width properties can be used to adjust size of buttons in a webpage.
Define Color and Border: A UI compatible color and border with the right thickness make buttons stand out. The background-color and border property can be used to set color and border for any buttons in css.
Shadow Effect: Adding a shadow effect around button using box-shadow property enhances button style.
Hover Effect: Interactive styling like hover effect change the style of button when user hover the mouse over it. This can include changes in opacity, size (using transforms), etc.
Animated Button: CSS animation can be used to create dynamic interactive buttons.

Setting Buttons Colors

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

As mentioned above we can use background-color property in CSS to give right color for buttons. Check out the example

Example

在这个示例中，我们使用具有不同 * colors* 的样式按钮，与背景颜色的 UI 相匹配。

In this example we use style buttons with different colors that matches with UI of background color.

<!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* 属性设置按钮边框样式。

The border is space around the edge of a button. We can style a button border using border property.

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

The border property take three values thickness, type and color of border.

Example

下面是使用 border 创建具有不同边框颜色的按钮的示例

Here is an example of how to create buttons with different border colors using

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

We can create round cornered button or completely circular button using border-radius property.

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

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

Example

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

Here is an example of how to create rounded corner buttons.

<!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* 设置按钮的悬停状态样式。

Moving the mouse pointer above button without clicking on it is called hovering. We can style hover state of a button using :hover pseudo-class.

button:hover{
    property: value;
}

Example

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

Here is an example of creating button hover effect.

<!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 设置这些状态的样式。

The focus state of a button is the state when the button is focused, typically after being clicked or tabbed into. The active state of a button is the state when the button is being clicked. We can style these states using the pseudo-class :focus. and :active

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

Example

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

Here is an example focus state and active state of a button.

<!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* 属性用于为按钮周围添加阴影效果。

In CSS, the box-shadow property used to add shadow effect around buttons.

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

A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:

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

Example

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

Here is an example of how to create buttons with drop shadows.

<!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 启用此按钮。

A disabled button is a button that is not clickable. This button can be enabled using JavaScript when certain conditions are met.

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

We can create a disabled button by setting the cursor property to not-allowed.

Example

以下是一个示例。

Here is an 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* 属性为按钮定义水平宽度。

We can define horizontal width for button using width property.

Example

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

Here is an example of how to create buttons with different widths.

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

Here is an example of how to create a horizontal button group by removing the margins and adding the float: left property to each button.

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

Here is an example of how to create a vertical button group by setting display: block and float: left property

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

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

Here is an example of how to overlay a button on top of an image using relative positioning

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* 来设置按钮单击效果。

In, CSS we can use pseudo-elements to animate a button clicking effect.

Example

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

Here is an example of how to create animated effect on a button

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