css button

作者：清梦独行发布日期:2025-08-24 浏览:94

<!-- CSS Button 示例代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Button</title>
    <style>
        /* 定义按钮的基本样式 */
        .button {
            background-color: #4CAF50; /* 绿色背景 */
            border: none; /* 无边框 */
            color: white; /* 白色文字 */
            padding: 15px 32px; /* 内边距 */
            text-align: center; /* 文字居中 */
            text-decoration: none; /* 无下划线 */
            display: inline-block; /* 行内块元素 */
            font-size: 16px; /* 字体大小 */
            margin: 4px 2px; /* 外边距 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            border-radius: 8px; /* 圆角 */
        }

        /* 鼠标悬停时的样式 */
        .button:hover {
            background-color: #45a049; /* 更深的绿色 */
        }
    </style>
</head>
<body>

    <!-- 按钮元素 -->
    <button class="button">点击我</button>

</body>
</html>

解释说明：

HTML结构：使用了<button>标签来创建一个按钮，并给它添加了一个类名为button。
CSS样式：
- background-color: 设置按钮的背景颜色为绿色。
- border: 移除默认的边框。
- color: 设置文字颜色为白色。
- padding: 设置内边距，使按钮看起来更大。
- text-align: 文字居中对齐。
- text-decoration: 移除默认的下划线（如果有）。
- display: 使用inline-block使按钮可以和其他元素在同一行显示。
- font-size: 设置字体大小。
- margin: 设置外边距，使按钮与其他元素之间有一定的间距。
- cursor: 当鼠标悬停在按钮上时，光标会变成手型。
- border-radius: 设置圆角，使按钮看起来更圆润。
悬停效果：通过:hover伪类，在鼠标悬停时改变按钮的背景颜色。

上一篇：css 省略号表示溢出文本