[分享]css写一个小按钮

你是否有想过如何使用 CSS 创建一个小按钮？本文将教你如何使用简单的 CSS 代码快速创建一个小按钮。让我们开始！

 .my-button {
        display: inline-block;
        padding: 8px 16px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

    .my-button:hover {
        background-color: #0062cc;
    } 

首先，我们使用一个类名“my-button”来创建按钮的样式。在这个类中，我们使用 display 属性将按钮变成一个行内块，这样我们就可以将其插入到文本中。然后，我们通过 padding 属性设置按钮的内边距。接下来，我们使用 background-color 和 color 属性来设置按钮的颜色和文本颜色。我们还可以使用 text-decoration 属性来删除链接的下划线。

接着，我们使用 border-radius 属性来设置按钮的圆角，使其看起来更加美观。我们也可以使用 font-size 和 font-weight 属性来设置文本大小和粗细。最后，我们添加了 cursor 属性来将鼠标移动到按钮上时的光标设置为手形，表示可以单击它。

最后，通过使用 :hover 选择器我们可以改变按钮的背景颜色，使其在鼠标悬停或单击时更加吸引人。

以上就是一个小按钮的 CSS 代码，你可以根据自己的需求调整它的大小和颜色。希望这篇文章能对你有所帮助！