离子问题按钮css on ionic(html app)

时间:2017-09-19 19:51:13

标签: html css button ionic-framework border

从现在开始感谢所有人。

error

我不知道如何从我的按钮上取下这个“边框”。已经尝试了很多。 谁有意识形态?

code

2 个答案:

答案 0 :(得分:0)

<ion-header>
  <ion-navbar>
    <ion-title>Background Images</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="card-background-page">
  <ion-grid>
  <ion-row>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-only>
          Laboratorio
        <ion-icon name="medkit"></ion-icon>
      </button>

      </ion-card>
    </ion-col>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-right>
    Clinicas
    <ion-icon name="pulse"></ion-icon>
  </button>


      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
  <ion-grid>
  <ion-row>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-left>
    <ion-icon name="eye"></ion-icon>
    Pele
  </button>

      </ion-card>
    </ion-col>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-right>
  Odontologia
  <ion-icon name="home"></ion-icon>
</button>


      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

CSS :
.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 5%;
    font-size: 1.4em;
    width: 100%;
    font-weight: bold;
    color: #fff;
    float: left;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 80%;
    width: 100%;
    color: #fff;
    float: left;
  }

}

#button
{
  width: 10px;
  height: 10px;
  z-index: -1;
  outline: none;
}

答案 1 :(得分:0)

删除离子卡标记,然后尝试不用。我认为这个标签正在添加边框。