title: CSS Advanced Three Button Row Formatting
body: <p>I am trying to style a row of buttons in the Ionic 2 framework and am having some trouble. </p>
  
  <p>This is what the buttons I currently have look like:</p>
  
  <p><a href="https://i.stack.imgur.com/lwLdq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwLdq.png" alt="enter image description here"></a></p>
  
  <p>What I would like them to look like is something more along the lines of the following image: </p>
  
  <p><a href="https://i.stack.imgur.com/A1RNy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A1RNy.png" alt="enter image description here"></a></p>
  
  <p>I would like the end result to have a larger circular button in the middle, with the two buttons on each of its side having a border that goes along with the curvature of the center button.</p>
  
  <p>I am new to styling and do not really know where to start with this, so any pointers in the right direction would be greatly appreciated.</p>
  
  <p>Here is the CSS so far that I have added to my buttons.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                    &lt;ion-row class="button-row"&gt;
                          &lt;ion-col col-5 class="button-col"&gt;
                              &lt;button class="left-right-buttons" id="left-button" ion-button no-shadow (click)="swipeCard(false)"&gt;
                                  &lt;ion-icon class="button-row-icons" name="arrow-dropleft"&gt;&lt;/ion-icon&gt;
                              &lt;/button&gt;
                          &lt;/ion-col&gt;
                          &lt;ion-col col-2 class="button-col"&gt;
                              &lt;button id="select-button" ion-button no-shadow (click)="selectCard(restaurant)"&gt;
                                  &lt;ion-icon class="button-row-icons" name="checkmark-circle-outline"&gt;&lt;/ion-icon&gt;
                              &lt;/button&gt;
                          &lt;/ion-col&gt;
                          &lt;ion-col col-5 class="button-col"&gt;
                              &lt;button class="left-right-buttons" id="right-button" ion-button no-shadow (click)="swipeCard(true)"&gt;
                                  &lt;ion-icon class="button-row-icons" name="arrow-dropright"&gt;&lt;/ion-icon&gt;
                              &lt;/button&gt;
                          &lt;/ion-col&gt;
                      &lt;/ion-row&gt;</code></pre>
  </div>
  </div>
  </p>