/*矢印が右に移動して背景がつく*/

.btnarrow5{
    /*矢印の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  border: 1px solid rgb(252, 251, 251);
    padding: 8px 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: rgb(252, 247, 247);
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btnarrow5:hover{
  background:rgb(247, 245, 245);
  color:#fff;
}

/*矢印と下線の形状*/
.btnarrow5::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:-26px;
    /*下線の形状*/
  width:40px;
  height:1px;
  background:rgb(252, 250, 250);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btnarrow5::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 20%;
    right: -21px;
    /*矢印の形状*/
  width:1px;
  height:12px;
  background:rgb(248, 248, 248);
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
  right:-30px;
}

.btnarrow5:hover::after{
  right:-25px;
}