Formatage avancé de lignes à trois boutons CSS

Question

J'essaie de styler une rangée de boutons dans le cadre Ionic 2 et j'ai quelques problèmes.

C'est ce que les boutons que j'ai actuellement ressemblent:

Ce que je voudrais qu'ils ressemblent à quelque chose de plus le long des lignes de l'image suivante:

Je voudrais que le résultat final ait un plus grand bouton circulaire au milieu, avec les deux boutons sur chacun de ses côtés ayant une bordure qui va avec la courbure du centre bouton. Je suis novice dans le domaine du stylisme et je ne sais pas vraiment par où commencer, donc tout pointeur dans la bonne direction serait grandement apprécié.

Voici le CSS jusqu'ici que j'ai ajouté à mes boutons.

.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>

Answer 1

Utilisez CSS Flexbox, margin et z-index pour organiser des éléments. Jetez un oeil à l'extrait ci-dessous:

.button-row-icons { 
 
    font-size: 2.5em; 
 
    display: flex; 
 
} 
 

 
.left-right-buttons { 
 
    background: none; 
 
    color: #AD001A; 
 
    padding: 0 20px; 
 
    border: 2px solid #AD001A; 
 
    margin: 0px !important; 
 
    line-height: 1; 
 
    height: 40px; 
 
    z-index: 5; 
 
    position: relative; 
 
} 
 

 
.left-right-buttons:active { 
 
    background: #eee; 
 
} 
 

 
#select-button { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 0px !important; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
#left-button { 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    margin: 5px -20px 0 0 !important; 
 
} 
 

 
#right-button { 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin: 5px 0 0 -20px !important; 
 
}

<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> L 
 
     </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> M 
 
     </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> R 
 
     </button> 
 
    </ion-col> 
 
</ion-row>

Hope this helps et est ce que vous essayez d'atteindre.