Button with right arrow

ionic-v1
1

Hi everybody,

I was searching on ionic doc all for ion-button and i want to make a button like this.

image
Capture d’écran 2016-08-05 à 10.00.25.png756×94 6.46 KB

And this button will redirect me to another page. I want to have this idea of a text which is in placeholder and an arrow on the right side to show that there is another page after :slight_smile:

Thank you and hope you can help me :smiley:

2

you can do a little bit of css styling for arrow the part like :
.arrow {
float: right;
}

or use text-right in your html…

3

<a href="#/tab/add_activities" class="button button-full button-stable icon-right ion-ios-arrow-right">Add activity</a>

i made this, but i don’t know how to put on the left side the text and like a placeholder

4

use text-left or float: left;

example:

<a class="item item-avatar-left text-right" href="#/chatbox">
      <img src="img/couple.jpg">
               <div class="item-text-left text-left">
                      <h2>User Name</h2>
                      <p>Sample message</p>
               </div>
               <p>2m ago</p>
               <span class="mess-notif">1</span>
    </a>

Css:

.item-text-left {
float: left;
}

.mess-notif {
text-align: right;
color: #ffffff;
background-color: #D85D4D;
padding: 5px;
border-radius: 3px 3px 3px 3px;
line-height: 2;
}

5

Thanks it works ! :smiley:

6

Im glad I was able to help you… xD