如何修复按钮样式（CSS）：左对齐、容器调整及hover过渡实现

1. 按钮左对齐 #

给.button-container显式设置左对齐规则，避免父元素样式干扰：

.button-container {
  display: flex;
  justify-content: flex-start; /* 强制按钮左对齐 */
  gap: 15px; /* 替代margin-right，多按钮时间距更均匀 */
}

2. 调整文章容器适配按钮 #

修改article样式，让容器充分利用可用宽度，防止按钮被截断：

article {
  width: 100%;
  max-width: none; /* 取消原有最大宽度限制（如果存在） */
  box-sizing: border-box; /* 确保内边距不会撑大容器 */
  padding: 1rem; /* 按需调整，避免按钮贴边 */
}

3. 添加Slide Right hover动画 #

通过伪元素实现背景滑动效果，匹配你要的动画样式：

.button-container a.button {
  position: relative;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  color: #fff; /* 按需设置文字颜色 */
  background-color: #2563eb; /* 示例蓝色，替换成你的按钮底色 */
  overflow: hidden; /* 隐藏超出按钮范围的伪元素 */
  transition: color 0.4s ease;
}

.button-container a.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 滑动层背景，按需调透明度 */
  transition: width 0.4s ease;
}

.button-container a.button:hover::before {
  width: 100%;
}

整合后的完整代码片段 #

<div class="button-container">
  <a href="https://www.holopin.io/@drippycat" class="button primary">Holopin</a>
</div>
<style>
article {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 1rem;
}

.button-container {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.button-container a.button {
  position: relative;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  color: #fff;
  background-color: #2563eb;
  overflow: hidden;
  transition: color 0.4s ease;
}

.button-container a.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: width 0.4s ease;
}

.button-container a.button:hover::before {
  width: 100%;
}
</style>
</article>

说明：

• 把#2563eb替换成你实际使用的按钮背景色
• 若原有article已设置内边距，可根据需求调整padding值

内容的提问来源于stack exchange，提问作者drippy-cat