圖像丟失::後僞元素

Question

我有一個按鈕與懸停效果。

當我應用懸停類時，圖像（向下箭頭）丟失。如果我刪除懸停類，然後我可以看到圖像。

HTML代碼與懸停類

<button type="submit" class="button uppercase btn-1b">home</button> 

沒有懸停類

<button type="submit" class="button uppercase">home</button> 

Demo

HTML代碼 - 隨着圖像但沒有懸停效果

Demo - 以懸停效果但缺少圖像。

任何幫助，高度讚賞。提前致謝。

Answer 1

可以在.btn-1b:after在.button::before僞元素和過渡背景定義箭頭圖片：

.button::before { 
 
    background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044"); 
 
    background-repeat: no-repeat; 
 
    content: ""; 
 
    height: 5px; 
 
    position: absolute; 
 
    right: 4.1rem; 
 
    top: 1.1rem; 
 
    width: 8px; 
 
} 
 
.uppercase { 
 
    text-transform: uppercase; 
 
} 
 
.button { 
 
    color: white; 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #000; 
 
    border: 1px solid #9d9368; 
 
    font-size: 17px; 
 
    padding: 0.5rem 2rem; 
 
    width: 220px; 
 
    display: inline-block; 
 
    cursor:pointer; 
 
} 
 
.btn-1b:after { 
 
    content: ''; 
 
    position: absolute; 
 
    transition: all 0.3s ease 0s; 
 
    width: 100%; 
 
    height: 0; 
 
    top: 0; 
 
    left: 0; 
 
    background: #ffffff; 
 
    z-index: -1; 
 
} 
 
.btn-1b:hover, .btn-1b:active { 
 
    color: #0e83cd; 
 
} 
 
.btn-1b:hover:after, .btn-1b:active:after { 
 
    height: 100%; 
 
}

<button type="submit" class="button uppercase btn-1b">home</button>