title: Make button link - Javascript
body: <p>I have this code to embed on my site from Setmore to allow appointment booking on the website, this opens a popup in the website like you would expect on a hotel booking website.</p>
  
  <pre><code>&lt;script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"&gt;&lt;/script&gt;&lt;a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"&gt;&lt;img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>This uses a really boring button so I made a custom one in photoshop to replace. However, I wanted to make one in CSS so that it changes when the user hovers over it. </p>
  
  <pre><code>&lt;Center&gt;
  &lt;button class="button button1"&gt;BOOK NOW&lt;/button&gt;
  &lt;/Center&gt;
  
  &lt;style&gt;
  .button {
  background-color: #2f896b; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  }
  
  .button1 {
  background-color: white;
  color: black;
  border: 2px solid #2f896b;
  }
  
  .button1:hover {
  background-color: #2f896b;
  color: white;
  &lt;/style&gt;
  </code></pre>
  
  <p>I Would like to make it so that I can use the button that I've made but it still has the exact same functionality as the image being there in the original code to code to embed. Any ideas?</p>