Styling <a> as block button into a footer bar


#1

Hello everyone,

I’m just starting developing with Ionic which looks very awesome !
I need a footer button in my application.
Here is the code I have use :

<ion-footer-bar class="bar-assertive">
    <button class="button button-positive button-block">I'm a footer button</button>
 </ion-footer-bar>

In fact, the button as to be a link because it’s refering to an external url.

<ion-footer-bar class="bar-assertive">
    <a  href="google.com" class="button button-positive button-block">I'm a footer link</a>
 </ion-footer-bar>

The problem is the “a” tag does not accept any of button-block or button-full class as its scopped on button element only.

Do I have to custom the “a” tag my self to get a block element ? Or is there any other way to achieve a full page width footer link ?

Thanks in advance


#2
 <a href="google.com"><button class="button button-positive button-block">I'm a footer button</button></a>

#3

I have already tried but any way it doesn’t solve the problem to : How to get a full width link into a footer bar ?


#4

This should do the trick

a.button-full,a.button-block{
  width: 100%;
}