我想在Ionic 2框架中设计一排按钮,并且遇到了一些麻烦。CSS高级三按钮行格式化
这是我目前拥有的按钮看起来像:
我想什么他们看起来象是沿着以下图像的行更多的东西:
我希望最终的结果是在中间有一个更大的圆形按钮,每个边上的两个按钮都有一个与中心曲率一致的边框按钮。
我是新来的造型,并不真正知道从哪里开始,所以任何指针在正确的方向将不胜感激。
这是迄今为止我添加到我的按钮的CSS。
.button-row-icons {
font-size: 2.5em;
}
.left-right-buttons {
background: none;
color: #AD001A;
border: 2px solid #AD001A;
margin: 0px !important;
}
.left-right-buttons:active {
background: #eee;
}
#select-button {
border-radius: 40%;
margin: 0px !important;
}
#left-button {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
#right-button {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
<ion-row class="button-row">
<ion-col col-5 class="button-col">
<button class="left-right-buttons" id="left-button" ion-button no-shadow (click)="swipeCard(false)">
<ion-icon class="button-row-icons" name="arrow-dropleft"></ion-icon>
</button>
</ion-col>
<ion-col col-2 class="button-col">
<button id="select-button" ion-button no-shadow (click)="selectCard(restaurant)">
<ion-icon class="button-row-icons" name="checkmark-circle-outline"></ion-icon>
</button>
</ion-col>
<ion-col col-5 class="button-col">
<button class="left-right-buttons" id="right-button" ion-button no-shadow (click)="swipeCard(true)">
<ion-icon class="button-row-icons" name="arrow-dropright"></ion-icon>
</button>
</ion-col>
</ion-row>
请添加HTML。 –
@SauravRastogi新增相关HTML – Biggytiny