html表单提交按钮样式修改 按钮美化方法解析

input[type="submit"] {
  -webkit-appearance: none; /* 移除webkit浏览器的默认样式 */
  -moz-appearance: none;    /* 移除Mozilla浏览器的默认样式 */
  appearance: none;         /* 标准的移除默认样式方法 */
  border: none;             /* 移除边框 */
  background: none;         /* 移除背景 */
  padding: 0;               /* 移除内边距 */
  margin: 0;                /* 移除外边距 */
  font-family: inherit;      /* 继承父元素的字体 */
  font-size: inherit;        /* 继承父元素的字体大小 */
  color: inherit;           /* 继承父元素的颜色 */
  cursor: pointer;          /* 设置鼠标指针样式 */
}

input[type="submit"] {
  background-color: #4CAF50; /* 设置背景颜色 */
  color: white;              /* 设置文字颜色 */
  padding: 10px 20px;          /* 设置内边距 */
  border-radius: 5px;         /* 设置边框圆角 */
  font-size: 16px;             /* 设置字体大小 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

input[type="submit"]:hover {
  background-color: #3e8e41; /* 设置鼠标悬停时的背景颜色 */
}

input[type="submit"] {
  position: relative;
  overflow: hidden; /* 隐藏溢出内容，比如伪元素 */
}

input[type="submit"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* 添加渐变背景 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1; /* 确保在文字下方 */
}

input[type="submit"]:hover:before {
  transform: translateX(0); /* 鼠标悬停时显示渐变效果 */
}

<input type="submit" value="提交">
<svg class="icon" width="20" height="20" viewBox="0 0 20 20">
  <path fill="currentColor" d="M10 15l-5-5 1.41-1.41L10 12.17l3.59-3.58L15 10z"/>
</svg>

.icon {
  vertical-align: middle; /* 使图标垂直居中 */
  margin-left: 5px;      /* 添加图标和文字之间的间距 */
}

<button type="submit">
  <span>提交</span>
  <i class="loading-icon"></i>
</button>

button[type="submit"] {
  position: relative; /* 确保加载图标可以相对于按钮定位 */
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* 默认隐藏 */
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite; /* 应用旋转动画 */
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

const submitButton = document.querySelector('button[type="submit"]');
const loadingIcon = document.querySelector('.loading-icon');

submitButton.addEventListener('click', function(event) {
  submitButton.disabled = true; /* 禁用按钮 */
  loadingIcon.style.display = 'inline-block'; /* 显示加载图标 */
  submitButton.querySelector('span').style.opacity = 0; // 隐藏文字

  // 模拟提交过程 (实际应用中替换为你的表单提交代码)
  setTimeout(() => {
    submitButton.disabled = false; /* 启用按钮 */
    loadingIcon.style.display = 'none'; /* 隐藏加载图标 */
    submitButton.querySelector('span').style.opacity = 1; // 显示文字
    alert('提交成功!'); // 提示
  }, 2000); // 模拟2秒的提交时间
});

input[type="submit"] {
  border: none;
  box-shadow: none;
  background-image: none;
  background-color: #3498db; /* 使用纯色背景 */
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #2980b9;
}

input[type="submit"] {
  border: 1px solid #2980b9;
  background-color: transparent; /* 透明背景 */
  color: #2980b9;
}

input[type="submit"]:hover {
  background-color: #2980b9;
  color: #fff;
}