CSSボタンが動かない

Question

私はCSSでゴーストボタンを作成しましたが、それ以降は元の単語にマウスを置いたときの単語の移動が動いていないことを除いて、すべてがうまく機能しています。これはのみ1行のコードが必要になる場合がありますマウスのホバーに左に5pxのを移動するための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> 

ここでのHTMLコードを推測

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 
} 

http://codepen.io/anon/pen/grNpPq

これはクロム52