How to create a clickable button on a header image with html?

advertisements

I would like to know how to create a clickable button in HTML format that sits on in the center of a header image.

I have tried to use the button tags along with the href attribute along with the img tags to try to wrap the code around the desired image but it doesn't work. An example of the result that I am trying to achieve can be found in the header on github.com.


I'm not sure if you just want a button centered on a header image, or if there is an image that you want styled as part of the button. (Post a screenshot for clarity, maybe?) Here is a snippet that does the former.

.header {
  background-image: url('http://lorempixel.com/640/200/');
  width: 640px;
  height: 200px;
  text-align: center;
}

.header button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
<header class="header">
  <button onclick="alert('You clicked me!');" id="myButton">Click me!</button>
</header>