Переместить PNG с помощью CSS

Как я могу положить стрелку в поле кнопки? Будем благодарны за любые предложения по поводу кода.

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

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>

Другие вопросы по тегам