Question

我创建了一个包含以下html和css的按钮

.btn:hover, .btn--white {
    color: #fff;
}
.btn--white {
    border-color: #fff;
}
.btn {
    font-size: 14px;
    color: #ed1c24;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: transparent;
    border-color: #ed1c24;
    border: 1px solid #ed1c24;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 0;
}
a {
    text-decoration: none;
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}

.text--center {
    text-align: center;
}
.text--white {
    color: #fff;
}
body {
    font-family: 'Open sans', sans-serif;
    color: #333;
}
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
.btn--white:before, .btn--white:after, .btn--white span:before, 
.btn--white span:after {
    background-color: #fff;
}
.btn:before, .btn:after, .btn span:before, .btn span:after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    height: 0;
    width: 25.25%;
    background-color: #ed1c24;
    -webkit-transition: all 500ms;
    transition: all 500ms;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn:before {
    left: 0;
}
.btn--white:before, .btn--white:after, .btn--white span:before, 
.btn--white span:after {
    background-color: #fff;
}
.btn:before, .btn:after, .btn span:before, .btn span:after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    height: 0;
    width: 25.25%;
    background-color: #ed1c24;
    -webkit-transition: all 500ms;
    transition: all 500ms;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn:after {
    left: 50%;
}

<div id="why-us" class="parallax overlay page-section">
  <div class="container">
    <div class="text--center text--white">
      <div class="on-scroll-reveal animated bounceInUp" data-animation="bounceInUp" data-offset="80%" style="opacity: 1;">
        <span class="heading heading--center">Why Us ?</span>
      </div>
      <div class="on-scroll-reveal animated bounceInUp" data-animation="bounceInUp" data-offset="80%" style="opacity: 1;">
        <div class="paragraph text--center">
          <p>We Represent internationally and Domestic reputed products from the printing industry</p>
          <p>Employees who have undergone intensive hands on training in Europe and overseas</p>
          <p>More Then 20 year of experience in the printing and packaging industry</p>
          <p>Technical support from professionally qualified and Experience Team</p>
          <p>Prompt and reliable service to our customers around the clock</p>
        </div>
      </div>
      <div class="on-scroll-reveal animated bounceInUp" data-animation="bounceInUp" data-offset="100%" style="opacity: 1;">
        <a href="" class="btn btn--white">
          <span>Contact Us</span>
        </a><!--btn-->
      </div>
    </div>
  </div>
</div>

现在每当我将鼠标悬停在按钮上时，左边框和.btn：之前就会出现这种奇怪的差距 button on hover

当我从开发工具检查按钮时，当我取消选中/修改这些属性并将鼠标悬停在按钮上时，间隙不会显示： -

text-transform（取消选中）
border：1px solid #fff ===＆gt; border：4px solid #fff
display：inline-block ===＆gt;显示：块（我不希望它被阻止 '因此它的全宽）
溢出（取消选中）
text-align：center（取消选中）（继承自 div.text - center.text - white）（按钮一直向左移动显然）

请告诉我为什么会这样，以及解决问题的正确方法是什么？

悬停时按钮左侧不必要的间隙

0 个答案: