.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	background:#a02334;
	border-radius:25px;
    width:100px;
	padding: 20px;
    text-align: center;
	display: inline-block;
    text-decoration: none;
    color:#fff2e1;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s;
}

/*hoverした際の変化*/
.btntextchange:hover{
    border: 1px solid #a02334;
    background-color: #fff;
    color: #a02334;
  
}

.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;/*不透明に*/
}

.btnchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
    background: #a02334;
	border-radius:25px;
    min-width:210px;
	padding: 20px;
    text-align: center;
	display: inline-block;
    text-decoration: none;
    color: #ead8c0;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s;
}

/*hoverした際の変化*/
.btnchange:hover{
    border: 1px solid #a02334;
    background-color:#fff;
    color: #a02334;
}

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

/*差し替わるテキストの設定*/
.btnchange span:nth-child(2){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btnchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

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