How to use image as button in ionic

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

I have tried using

  • Why Google native oauth2 flow require client secret?
  • Native Android/iOS development vs Marmalade SDK
  • Authentication using Apache Cordova for Visual Studio
  • Authentication for Node.js App with Angular.js and iOS Clients
  • Objective-C to Java cross compiler
  • Access CloudKit from Android?
  • <button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button>

    But the button height stay the same. So it won’t show full size image.
    I have tried




    But nothing seems to work.

    I also tried adding my own css

    .Test-up {
      border :none;
      padding : 0px;
    .Test-down {
      opacity: 0.5;
      padding: 0px;

    and added below code into my index.html

    <button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#">

    and below code to my controller

    $scope.class = "Test-up";

    as I tried from
    But it doesn’t work with ios or android. So what should I do?

    5 Solutions Collect From Internet About “How to use image as button in ionic”

    try this.

     <img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >

    this shoud to the trick you can have the height and width as your wish.

    Make sure you give the correct path to src field.

    check this

    <button ng-mousedown="class='fb-down'" ng-mouseup="class='fb-up'" class="{{class}}"> <img src="your_image_path" alt="" title="" /> </button>

    If still you face any problem in css and in anyhting let me know.


    Ionic 2

    Place your icons in www/assets/images then

    <img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" >

    You can try this way –

    <button  (click)="click()" block>
         <img src="assets/img/scan_btn.png">

    See the pen @
    Hope it helps 🙂 <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>