CSS Advanced Three Button Zeilenformatierung

Question

Ich versuche, eine Reihe von Schaltflächen im Ionic 2-Framework zu stylen und habe einige Probleme.

Dies ist, was die Tasten ich zur Zeit aussehen haben:

Was ich möchte sie wie entlang der Linien des folgenden Bild ist mehr etwas sehen:

Ich möchte, dass das Endergebnis einen größeren kreisförmigen Knopf in der Mitte hat, mit den zwei Knöpfen auf jeder Seite einen Rand, der mit der Krümmung des Zentrums einhergeht Taste.

Ich bin neu im Styling und weiß nicht, wo ich anfangen soll, also würden alle Hinweise in die richtige Richtung sehr geschätzt werden.

Hier ist das CSS so weit, dass ich meine Tasten hinzugefügt habe.

.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

Verwenden CSS Flexbox, margin und z-index Elemente zu arrangieren. Werfen Sie einen Blick auf das Snippet unten:

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

hoffe, das hilft und ist das, was Sie erreichen wollen.