html提交按钮样式美化
时间: 2023-07-05 07:32:35 浏览: 81
为了美化HTML提交按钮的样式,可以使用CSS样式表。下面是一个简单的样式示例,可以根据自己的需要进行修改:
```css
button[type="submit"] {
background-color: #4CAF50; /* 设置按钮背景颜色 */
color: white; /* 设置按钮文字颜色 */
border: none; /* 取消按钮边框 */
padding: 10px 20px; /* 设置按钮内边距 */
text-align: center; /* 设置按钮文字居中 */
text-decoration: none; /* 取消文字下划线 */
font-size: 16px; /* 设置按钮字体大小 */
cursor: pointer; /* 设置鼠标样式 */
border-radius: 5px; /* 设置按钮圆角 */
box-shadow: 0px 2px 2px #888888; /* 设置按钮阴影 */
}
button[type="submit"]:hover {
background-color: #3e8e41; /* 设置鼠标悬停时的背景颜色 */
}
```
将以上代码加入到你的CSS文件中,然后将HTML提交按钮的type属性设置为“submit”,例如:
```html
<button type="submit">提交</button>
```
这样就可以美化HTML提交按钮的样式了。
相关问题
用css样式美化上面的代码
好的,以下是一个简单的 CSS 样式示例,可以用于美化上述代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
font-size: 16px;
}
form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="savePerson.do" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
这段 CSS 代码会使页面的表单样式更加美观,包括背景、边框、输入框和提交按钮等元素。请注意,这只是一个简单的样式示例,您可以根据自己的需要进行修改和优化。
给我一段用html和ccs写的web美化表格,要求顶部有输入框和提交按钮,下面是表格
当然可以!以下是一个使用 HTML 和 CSS 美化的简单示例,其中包含顶部的输入框和提交按钮,以及下面的表格:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* 输入框和按钮样式 */
.container {
margin-top: 20px;
}
input[type=text], input[type=submit] {
padding: 6px;
width: 200px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<input type="text" placeholder="在此输入内容">
<input type="submit" value="提交">
</div>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</table>
</body>
</html>
```
你可以将以上代码保存为一个 HTML 文件并在浏览器中打开,就可以看到美化的表格了。顶部有一个输入框和提交按钮,下面是一个简单的表格。你可以根据需要修改样式和内容。希望对你有所帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)