Transition Of CSS Button Not Working - css

Question

I have created a ghost button in CSS and everything is working perfectly well except that the transition of the word after which the user hovers his mouse on the original word is not moving. I want the word "View Details: to move 5px to the left on mouse hover. This might only need one line of code. Thx (-:
.btn_action_1 {
border: 5px solid #000 !important;
/* Change button border color */
color: #000 !important;
/* Change button text color */
font-size: 24px;
line-height: 0;
display: inline-block;
padding: 10px 20px 10px;
position: relative;
text-decoration: none;
text-transform: capitalize;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_1 span {
left: 10px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 17px;
width: 17px;
position: relative;
left: -10px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1:hover {
background: #000 !important;
/* Change button background color when mouse over */
color: #fff !important;
/* Change button text color when mouse over */
}
.btn_action_1:hover span {
left: -10px;
}
.btn_action_1:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 0px;
}
#media (max-width: 479px) {
.btn_action_1 {
padding: 18px 30px;
}
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
display: none
}
<a href="#">
<span class="default">Product Name</span>
<span class="hover">View Details</span>
<i class="ico_arrow"></i>
</a>

Answer 1

HTML
<div class="btn_action_1">
<span class="ico_arrow"></span>
<span>some text</span>
</div>
CSS
.btn_action_1 {
border: 5px solid #000 !important;
/* Change button border color */
color: #000 !important;
/* Change button text color */
font-size: 24px;
line-height: 0;
display: inline-block;
padding: 10px 20px 10px;
position: relative;
text-decoration: none;
text-transform: capitalize;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_1 span {
left: 10px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 17px;
width: 17px;
position: relative;
left: -10px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1:hover {
background: #000 !important;
/* Change button background color when mouse over */
color: #fff !important;
/* Change button text color when mouse over */
}
.btn_action_1:hover span {
left: -10px;
}
.btn_action_1:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 0px;
}
#media (max-width: 479px) {
.btn_action_1 {
padding: 18px 30px;
}
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
display: none
}
guessing the HTML code here
http://codepen.io/anon/pen/grNpPq
this seems to work, on chrome 52.