css ホバー时矢印が横へ移动アニメーション

Posted 2021-05-13

<p class="btn btn_b"><a href="#">詳しくみる</a></p>

.btn {
    color: #0064b4;
    font-size: 2rem;
    display: inline-block;
    position: relative;
    border: 1px solid #0064b4;
}

.btn a {
    display: block;
    width: 395px;
    height: 40px;
    padding: 5px 20px;
}

.btn:before,
.btn:after,
.btn a:after {
    content: '';
    position: absolute;
    height: 2px;
    background: #0064b4;
    -webkit-transition: -webkit-transform .4s .2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform .4s .2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s .2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s .2s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn:before {
    right: 30px;
    bottom: 25px;
    width: 40px;
}

.btn:hover:before {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
}

.btn:after {
    right: 27px;
    bottom: 30px;
    width: 15px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn a:after {
    right: 27px;
    top: 28px;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.btn:hover:after {
    -webkit-transform: translateX(15px) rotate(45deg);
    transform: translateX(15px) rotate(45deg);
}

.btn a:hover:after {
    -webkit-transform: translateX(15px) rotate(-45deg);
    transform: translateX(15px) rotate(-45deg);
}

.btn a:hover {
    opacity: 1;
}