[Ionic Tutorial] Beautiful Custom Tabs with Custom Icons

Hey, guys,
I started doing it on IONIC 4/5, but I still can’t finish it.
Some minor adjustments are missing. anyone who can contribute would help everyone. because we are all using Ionic 4/5

@TomCosta ajuda ai… @reinerluke97 Let’s make it work on ionic 4/5

My html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flame"></ion-icon>
      <ion-label >&nbsp;</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="search" ></ion-icon>
      <ion-label>&nbsp;</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="add" class="custom-tab" ></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="notifications"  ></ion-icon>
      <ion-badge >4</ion-badge>
      <ion-label>&nbsp;</ion-label>
    </ion-tab-button>
    

    <ion-tab-button tab="tab5" >
      <ion-icon name="person"></ion-icon>
      <ion-label>&nbsp;</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

My Css

ion-tabs{
    background: #121212;
}
ion-tab-bar  {
    background: #121212;
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 30px;
    margin: 5px 0px 5px 5% !important;
    max-height: 56px;
    height: 56px;
}
.tab-selected ion-icon{
    color: white;
}
.tab-selected ion-label{
    width: 20px;
    height: 6px;
    border-radius: 4px;
    background: purple;
}

.tab-selected, ion-tab-button{
    background: #2c2c2c;
}


#tab-button-tab1,
#tab-button-tab2,
#tab-button-tab3,
#tab-button-tab4,
#tab-button-tab5 {
    background: #23272a;
        -webkit-box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
        -moz-box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
        box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
}
#tab-button-tab1 {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

#tab-button-tab2 {
  border-top-right-radius: 15px;
}

#tab-button-tab4 {
  border-top-left-radius: 15px;
}
#tab-button-tab3 {
    overflow: visible !important;

    ion-icon {
        -webkit-transform: translate3d(0, 0px, 0);
        transform: translate3d(0, 0px, 0);
        background: purple;
        padding: 16px !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        margin-top: -50px !important;
        box-shadow: 0 0 0 11px #121212;
    }
}
#tab-button-tab5 {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    .tab-button-icon {
        background-repeat:no-repeat;
        background-position:center;
        height:24px;
        width:24px;
        background-size:contain;
        border-radius: 50%;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        &:before {
            display:none;
        }
    }
}
ion-badge {
    --background: purple;
    --color: white;
    width: 23px;
    height: 21px;
    font-size: .8rem;
}