时间戳

首页 > 解决方案 > 按钮下方的边框

html - 按钮下方的边框

问题描述

关于 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>

小提琴： https ://jsfiddle.net/5L6ctw6m/2

标签： htmlcss

解决方案

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

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);
}

推荐阅读