html - 按钮下方的边框

Question

关于 CSS，我遇到了一个小问题: 我有一个带有过渡的按钮，在这个过渡期间我的箭头确实移动了，但是，它下面的阴影框并没有随之移动。

有什么想法/建议可以解决这个问题吗？

<div class="download_btn download_button">
    <a class="btn left">
        <span class="left icon icon-lock"></span>
        <span class="right title"><span class="arrow-right"></span>Click here</span>
    </a>
</div>

fiddle : https://jsfiddle.net/5L6ctw6m/2

Answer 1

作为快速解决方案，您可以采用这种变体

https://jsfiddle.net/zndemLtd/1/

<a class="btn left">
  <span class="left icon icon-lock">
    <span class="arrow-right"></span>
  </span>
  <span class="right title">Click here</span>
</a>

此外，CSS 也进行了一些更新。

.landing_page .step_container .download_container .download_btn .btn.left span.arrow-right {
  left: 100%;
  top: 0;
  z-index: 1;
}
.landing_page .step_container .download_container .download_btn .btn.left span.arrow-right:before {
  right: 10px;
    top: 25px;
    height: 5px;
    width: 7px;
    background: #030e15;
    content: '';
    position: absolute;
}
.landing_page .step_container .download_container .download_btn .btn:hover span.arrow-right {
  left: calc(100% + 5px);
}