ホバーアクションについて

Question

ボタンに右から左へ色が変わるホバーアクションをつけようとしています。
右から左へ背景色が変わってボーダーもつくホバーアクションをつけたいのですが、
ホバーを外してもとに戻る動作の時にborder-bottomのみ残ってしまいます。

.btn .eff-1にtopの位置を指定してもうまくいきません。
（top:0px;、top:2px;、top:-2px;で試しましたがダメでした。.btnの高さを低くしてみても同様）
何が間違っているのでしょう？

    <div class="btn">
        <div class="eff-1"></div>
        <a href="#">more</a>
    </div>

.btn{
    width: 225px;
    height: 60px;
    background: #FF7385;
    text-align: center;
    line-height: 60px;
    position: relative;
    overflow: hidden;
}
.btn a{
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all .5s ease;
    z-index: 2;
    position: relative;
}
.btn .eff-1{
    width: 225px;
    height: 60px;
    right: -225px;
    background: #FFF;
    position: absolute;
    transition: all .5s ease;
}
.btn:hover .eff-1{
    right: 0;
}
.btn a:hover{
    color: #FF7385;
    border: 1px solid #FF7385;
}

Answer 1

私が質問者さんのコードを試したところでは、結果は質問者さんと異なったのですが、いずれにしても問題があったので、私のテスト環境できれいに動くよう修正してみました。

まず.btn a:hoverのborderは.btn aに移動します。
これにより、ホバリングしていてもしなくても、またホバリングでeff-1が動く過程でも、赤枠は常に固定表示されるようにします。

.btn .eff-1のheightは2px減らして58pxにし、さらにtop: 1px;を加えます。
これはeff-1が赤枠の上下にかぶらないようにするためです。

これで試してみてください。

Comments

[kumazou]

ご回答ありがとうございます！
試してみたらいい感じにできました！！
感謝です(*^-^*)

Answer 2

.btnのline-heightをheightより2px縮めてやればよいのでは？

.btn{
line-height:58px;
}

Comments

[kumazou]

ご回答ありがとうございます！
line-heightが同サイズなのが問題ですかね。試してみます！！