使用 CSS 样式化输入和提交按钮

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 样式化输入和提交按钮

作者：迹忆客最近更新：2023/04/27 浏览次数：

提交按钮是一种用于将数据提交到表单中的按钮。它通常在填写所有其他字段后放置在表单的末尾。单击提交按钮时，表单将传输到服务器进行处理。

提交按钮的语法与 HTML 中的其他按钮类似，但类型应为提交。本文将教我们如何使用 CSS 在 HTML 中设置输入和提交按钮的样式。

在 HTML 中创建提交按钮

有两种方法可以创建提交按钮。第一种方法是使用带有 type="submit" 属性的 <input> 标签。

这将创建一个按钮，单击该按钮将提交表单。

<button type='submit'>

第二种方法是使用 <button> 标签。这将创建一个可以使用 HTML 自定义的按钮。

<button> 标签可用于提交表单或触发 JavaScript 函数。

<input type="submit" value="Submit"/>

在 HTML 中创建输入按钮

输入按钮是一个简单的控件，允许用户单击并选择一个操作。您可以使用 type 属性设置为 button 的 <input> 元素创建一个输入按钮。

<input type="button" value="Click me!">

当用户单击按钮时，将执行与按钮关联的操作。在大多数情况下，操作以 JavaScript 事件处理程序的形式定义。例如，您可以定义一个在单击时显示警告消息的按钮：

<input type="button" value="Click me!" onclick="alert('Hello world!')">

除了 value 属性，您还可以使用 label 属性设置按钮的标签。

例如

<input type="button" value="Click me!" label="Hello world!">

您还可以使用 CSS 来设置输入按钮的样式。例如，您可以设置按钮的宽度、高度、颜色等。

使用 CSS 样式化输入和提交按钮

当谈到使用 CSS 设置输入和提交按钮的样式时，您需要确保它们选择相同的大小、配色方案和所有其他样式属性，以保持设计的一致性。

使用 CSS 样式化输入按钮

输入按钮是任何网页或应用程序的基本元素。它允许用户提交信息或采取行动，并使用浏览器的默认样式设置样式。但是，您可以使用 CSS 覆盖默认样式。

有几种不同的方法可以使用 CSS 设置输入按钮的样式。最典型的方法是使用 CSS 伪类：hover 、**:active** 和 :focus。当用户将鼠标悬停在按钮上、单击它或使其聚焦时，这些伪类会更改按钮的样式。

另一种设置输入按钮样式的方法是使用 CSS3 属性 box-shadow 和 border-radius。这些属性允许您在按钮周围添加阴影并使按钮变圆。

最后，您可以使用 CSS3 属性转换来缩放、旋转或倾斜按钮。这可以产生令人兴奋的效果，例如当用户将鼠标悬停在按钮上时使按钮变大。

所有这些方法都可以用来创建独特而时尚的输入按钮。

使用 CSS 样式化提交按钮

一种使用可用的 CSS 属性设置提交按钮样式的方法。这是一种理想的方式，可以让您的按钮具有与您网站的整体风格相匹配的独特外观。

另一种方法是设置按钮容器的样式，这可以让您更好地控制按钮的整体外观。如果您想向按钮添加背景图像或其他元素，则可以使用它。

代码示例

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="submit"] {
                position: absolute;
                top: 65%;
                left: 25%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #f1f1f1;
                color: black;
                font-size: 16px;
                padding: 16px 30px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
                border: 2px solid #4caf50; /* Green */
                box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 21px 0 rgba(0, 0, 0, 0.19);
            }

            input[type="submit"]:hover {
                background-color: #4caf50; /* Green */
                color: white;
            }

            input[type="text"] {
                width: 40%;
                padding: 14px 30px;
                margin: 9px 0;
                box-sizing: border-box;
            }
            input[type="textarea"] {
                padding: 36px 40px;
            }
        </style>
    </head>

    <body>
        <h2>Styling form buttons</h2>
        <div class="form-center">
            <form action="#" method="post">
                Name <input type="text" placeholder="Full name" />
                <br />
                Email <input type="text" placeholder="Email address" />
                <br />
                Date <input type="text" placeholder="Date" />
                <input type="submit" value="Submit" />
            </form>
        </div>
    </body>
</html>