如何实现点击按钮时显示隐藏的check图标并移除按钮文字

你只需要补充几行CSS规则就能实现默认隐藏check图标的需求，同时要注意给按钮补充flex布局属性，否则原有justify-content属性不会生效：

补充/修改的CSS规则 #

/* 给按钮补充flex布局，让内容水平垂直居中 */
.submitBtn {
  display: flex;
  align-items: center;
}
/* 默认隐藏check图标 */
.submitBtn .check {
  display: none;
}
/* 按钮聚焦（点击后）显示check图标 */
.submitBtn:focus .check {
  display: block;
}
/* 按钮聚焦后隐藏Login文字 */
.submitBtn:focus span {
  display: none;
}

完整修改后的CSS代码 #

.submitBtn {
  position: absolute;
  top: 400px;
  width: 200px;
  height: 40px;
  color: black;
  border: none;
  border-radius: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.submitBtn span {
  margin-left: 10px;
}

.submitBtn .check {
  display: none;
}

.submitBtn:focus {
  width: 50px;
  height: 40px;
  color: rgb(0, 255, 0);
}

.submitBtn:focus .check {
  display: block;
}

.submitBtn:focus span {
  display: none;
}

如果需要更自然的过渡效果，可以把display替换成opacity配合transition实现渐隐渐显，避免切换过于生硬。

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