CSS按鈕不工作的轉換

Question

我在CSS中創建了一個幽靈按鈕，除了用戶將鼠標移動到原始單詞之後的單詞過渡不移動之外，一切都工作得很好。我想這個詞「查看詳細信息：移動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> 

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 
} 

猜測這裏的HTML代碼

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

這似乎工作，對鉻52