html - CSS 按钮未正确对齐

Question

我通过编辑“Vincent Durand 的简单悬停效果”制作了这个按钮。但问题是我博客中的某些css 是重叠的。所以它没有正确对齐中间。我找不到它可能是哪一个。我尝试在某些地方使用 !important 标签。但我想它没有成功。我需要知道我应该在哪里使用 !important 在此代码中将按钮对齐到中间？或者我需要一个新的 css 元素来做到这一点吗？

<!-- Awesome button css Start -->
.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
<!-- Awesome button css End -->

<div class="btn-margin">
    <a class="btn btn-green" href="#">
        Click Here To See Answers
      </a>
</div>

Answer 1

添加 *{box-sizing:border-box;} 到你的 css

<!-- Awesome button css Start -->
*{box-sizing:border-box;}

.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
<!-- Awesome button css End -->

<div class="btn-margin">
    <a class="btn btn-green" href="#">
        Click Here To See Answers
      </a>
</div>