html - 使用 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>