title: How to use image as button in ionic
body: <p>My objective is to use image as a button in ionic. I first used a-tag to link between page. But when I clicked on the image. There is no button activated effect. So I switch to button-tag</p>
  
  <p>I have tried using</p>
  
  <pre><code>&lt;button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>But the button height stay the same. So it won't show full size image.
  I have tried</p>
  
  <pre><code>style="font-size:100px;"
  </code></pre>
  
  <p>and</p>
  
  <pre><code>style="line-height:100px;"
  </code></pre>
  
  <p>But nothing seems to work.</p>
  
  <p>I also tried adding my own css</p>
  
  <pre><code>.Test-up {
    border :none;
    padding : 0px;
  }
  
  .Test-down {
    opacity: 0.5;
    border:0px;
    padding: 0px;
  }
  </code></pre>
  
  <p>and added below code into my index.html</p>
  
  <pre><code>&lt;button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#"&gt;
  </code></pre>
  
  <p>and below code to my controller</p>
  
  <pre><code>$scope.class = "Test-up";
  </code></pre>
  
  <p>as I tried from <a href="http://codepen.io/Leiron/pen/ztawA" rel="noreferrer">http://codepen.io/Leiron/pen/ztawA</a>
  But it doesn't work with ios or android. So what should I do?</p>