CSS Button Generator

要构建一个 HTML 按钮，我们使用 button 标签。然而，我们可以使用 CSS 属性来自定义按钮。借助按钮，我们可以开发用户交互和事件处理。它们是网站上最常使用的组件之一。

通常，按钮用于表单提交以查看或获取信息。

CSS 按钮用于美化网页，方法是为按钮应用不同的样式属性。事件处理和用户交互都使用按钮。我们必须点击按钮来访问信息或完成表单。在 HTML 中，按钮是用 button 元素创建的。

HTML 按钮创建说明

使用 <button> 元素来构建一个按钮。

与使用 <div> 元素的通用容器相比，这是一种更用户友好且语义化的选择。

输出

使用一个时尚的按钮

输出

我们添加的第一个样式是

• Display: inline-block，让我们能够增加按钮的宽度和高度。
• Background-color: 背景色为粉色。添加一个漂亮的背景色。
• Padding: 按钮内边距 30px，让我们的按钮在四周都有更多的空间。
• Width: 400 像素，提供 400 像素的宽度。
• text-align: center；将我们的文本居中；
• Color: 黑色使我们的点击文本为黑色

我们现在将使用 border 属性来圆角我们的边框。我们还将放大我们的文本。接下来的几行代码

输出

为了在将光标移到按钮上时显示手形图标，让我们添加 cursor: pointer 并为其提供 7 像素的边距，所以

输出

在这种情况下，我们必须注意到一个细微的差别。在前面的示例中，将鼠标移到点击文本上时会变成一只手。但一旦我们将鼠标移到它的方向，整个按钮都会变成一只手！

悬停状态样式

最后一步是为悬停状态设置样式，以便当按钮的状态发生变化时，用户会收到视觉反馈。

输出

当我们指向点击按钮时，颜色将变为红色。悬停的色调变化发生得太快，可能不那么令人愉悦。

现在让我们添加 transition，注意将其用于按钮元素而不是悬停状态。

基本按钮样式

按钮元素可以使用多种 CSS 属性进行样式设置，其中一些在此处涵盖。

可以使用 background-color 属性更改按钮的背景色。

语法

示例： 在这种情况下，按钮已将背景颜色作为基本样式属性应用。

输出

按钮大小

要更改按钮的字体大小，请使用 font-size 属性

输出