.btntextchange {
    /*テキストの基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid rgb(255, 95, 95);
    border-radius: 25px;
    min-width: 210px;
    padding: 20px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: rgb(255, 255, 255);
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    /*アニメーションの指定*/
    transition: all .2s;
}


/*hoverした際の変化*/

.btntextchange:hover {
    background: rgb(255, 219, 219);
    color: rgb(59, 59, 59);
}

.btntextchange span {
    /*絶対配置でテキストの位置を決める*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*アニメーションの指定*/
    transition: all .5s;
    /*ブロック要素にしてテキスト折り返しなし*/
    display: block;
    white-space: nowrap;
}


/*差し替わるテキストの設定*/

.btntextchange span:nth-child(2) {
    opacity: 0;
    /*透過0に*/
}


/*hoverするとテキストが入れ替わる設定*/

.btntextchange:hover span:nth-child(1) {
    opacity: 0;
    /*透過0に*/
}

.btntextchange:hover span:nth-child(2) {
    opacity: 1;
    /*不透明に*/
}