CSS working with Chrome but not IE
<p>I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself</p>

<p>thanks in advance</p>

<p>CSS</p>

<pre><code>.button {
  background-color: #4CAF50;
  border-radius: 50%;
  width: 170px;
  height: 170px; 
  color: white;
  padding: 4px 8px;
  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 {
  position: absolute; 
  margin-top: 0px; 
  margin-left: 400px;
  background-color: white; 
  color: white; 
  border: 4px solid #83b739;
}

.button1:hover {
  background-color: #83b739;
  color: white;  
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;button class="button button1"&gt;&lt;a href="http://www.google.com"&gt;link&lt;/a&gt;&lt;/button&gt;
</code></pre>