用CSS移動PNG

Question

如何將箭頭放入按鈕盒？任何關於代碼的建議將不勝感激。

HTML：

<!--Header--> 
<div class="mainHeader header"> 
    <h1> 
     LET US MAKE YOUR AWESOME IDEA HAPPENN 
    </h1> 
    <div class="button"> 
     <p class=""> 
      WATCH VIDEO 
     </p><img src="playbutton.png"> 
    </div> 
</div> 

CSS：

.button { 
    width: 250px; 
    height: 46px; 
    border: solid white 2px; 
    margin: 0 auto; 
    z-index: 2; 
    position: relative; 
    top: 70%; 
} 
.button p { 
    text-align: center; 
    font-size: 20px; 
    font-family: 'Teko', sans-serif; 
    color: white; 
    position: relative; 
    bottom: 20%; 
} 

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

Answer 1

body{ 
 
    background: #000; 
 
} 
 

 
button { 
 
    width: 250px; 
 
    height: 46px; 
 
    margin: 0 auto; 
 
    background: none; 
 
    border: solid white 2px; 
 
    z-index: 2; 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-family: 'Teko', sans-serif; 
 
    color: white;  
 
}

<button> 
 
     WATCH SHOWREEL 
 
     <img src="http://iconizer.net/files/Splashyfish/orig/arrow_medium_down.png"> 
 
     </button>