CODEWITHSUNDEEP
androidioscssangularjsionic-framework
Wakeme UpNow
Wakeme UpNow

Reputation: 529

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

<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

style="font-size:100px;"

and

style="line-height:100px;"

But nothing seems to work.

I also tried adding my own css

.Test-up {
  border :none;
  padding : 0px;
}

.Test-down {
  opacity: 0.5;
  border:0px;
  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 http://codepen.io/Leiron/pen/ztawA But it doesn't work with ios or android. So what should I do?

Upvotes: 20

Views: 57695

Answers (10)

Rez
Rez

Reputation: 1

I asked Chatgbt for my code, & I think ROUTER-LINK is way better solution.

<router-link to="/home" routerDirection="forward">
   <img alt="LEN Logo" id="header_logo" height="40" src="/public/favicon.png" >
</router-link>

Upvotes: 0

Mark Baumann
Mark Baumann

Reputation: 116

You can wrap the image in a div Container.

<div (click)="yourFunction()">
    <img>
</div>

this has the advantage over an ion-button that the image itself is not changed and has no blue border.

Upvotes: 0

Mike D3ViD Tyson
Mike D3ViD Tyson

Reputation: 1771

Ionic 5

You can also use ion-card element :

<ion-card class="welcome-card" [routerLink]="['/tabs/tab3']">
    <ion-img src='/assets/VC-Button-calendario-01.svg'></ion-img>
</ion-card>

Upvotes: 2

Thilina Koggalage
Thilina Koggalage

Reputation: 1084

With this you can use image button for routing.

<button onclick="location.href='/pageToRoute/param'" block>
   <img  src="imagePath/imageName.jpg">
</button>

Upvotes: 0

Ricky Levi
Ricky Levi

Reputation: 7997

Ionic 4

<a routerLink="/user/details" routerDirection="forward">
   <img src='assets/images/icon.png'  />
</a>

Upvotes: 2

Bajrang Hudda
Bajrang Hudda

Reputation: 3268

You can try this way -

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

Upvotes: 12

Shahab Rauf
Shahab Rauf

Reputation: 3931

Ionic 2

Place your icons in www/assets/images then

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

Upvotes: 2

Jegadesh B S
Jegadesh B S

Reputation: 709

See the pen @ http://codepen.io/jeggu96/pen/NRaxj Hope it helps :) <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>

Upvotes: -1

Piyush Jain
Piyush Jain

Reputation: 1986

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.

Thanks

Upvotes: 1

Mohan Gopi
Mohan Gopi

Reputation: 7724

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.

Upvotes: 13

Related Questions