You need to make changes in the following code found in style.css file (besides the button class)
.comment-reply-link,
.read-more a,
.flex-caption a.read-more,
.home-middle .featuredpost a.more-link,
.home-middle .featuredpage .page a.more-link {
border: 1px solid #444;
color: #444;
display: inline-block;
padding: 10px 18px;
position: relative;
letter-spacing: 0.5px;
text-transform: uppercase;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
.button:after,
.comment-reply-link:after,
.read-more a:after,
.flex-caption a.read-more:after,
.home-middle .featuredpost a.more-link:after,
.home-middle .featuredpage .page a.more-link:after {
color: #fff;
content: "\f345";
font-family: dashicons;
font-size: 26px;
margin-left: -20px;
opacity: 0;
position: absolute;
right: 5px;
top: 4px;
}
.button:hover,
.comment-reply-link:hover,
.read-more a:hover,
.flex-caption a.read-more:hover,
.home-middle .featuredpost a.more-link:hover,
.home-middle .featuredpage .page a.more-link:hover,
.cta a.button:hover,
.sidebar .textwidget a.button:hover {
background-color: #22a1c4;
border-color: #22a1c4;
color: #fff;
padding: 10px 35px 10px 18px;
}
.button:hover:after,
.comment-reply-link:hover:after,
.read-more a:hover:after,
.flex-caption a.read-more:hover:after,
.home-middle .featuredpost a.more-link:hover:after,
.home-middle .featuredpage .page a.more-link:hover:after {
margin-left: -20px;
opacity: 1;
}
.flex-caption a.read-more {
border: 1px solid #fff;
color: #fff;
}