如何使用外部CSS为提交按钮设置样式？附代码示例

步骤1：创建外部CSS文件并引入到HTML中 #

先新建一个后缀为.css的文件（比如命名为style.css），然后在你的HTML页面的<head>标签里添加引入代码，关联这个CSS文件：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入外部CSS文件 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 你的原有代码 -->
  <div class="bu">
    <form action="#">
      <button type="submit" class="but" value="submit">Log in</button>
    </form>
  </div>
</body>
</html>

步骤2：在外部CSS文件中编写按钮样式 #

打开style.css，通过你给按钮设置的类选择器.but来编写样式，以下是一个实用的样式示例：

/* 基础按钮样式 */
.but {
  /* 设置背景色 */
  background-color: #4CAF50;
  /* 设置文字颜色 */
  color: white;
  /* 设置内边距，控制按钮大小 */
  padding: 10px 20px;
  /* 去掉默认边框 */
  border: none;
  /* 设置圆角 */
  border-radius: 4px;
  /* 设置鼠标悬停时的指针样式 */
  cursor: pointer;
  /* 设置字体大小 */
  font-size: 16px;
}

/* 鼠标悬停时的按钮样式 */
.but:hover {
  background-color: #45a049;
}

你可以根据需求修改颜色、内边距、字体大小等属性，比如把背景色改成#007bff（蓝色），或者调整border-radius的值来改变圆角程度。

内容的提问来源于stack exchange，提问作者aswanth6000