Ionic CSS Developer Expert Needed, Angular a Plus

Job ID: 32949229

Budget: $30 – $250 USD

We need to hire someone to work with our team to create some custom CSS within the Ionic framework for the bottom navigation tabs of our app. Please see the attached photo. You can see there are:

4 Tabs - Rankings, Profile, Share, Menu

Currently, these tabs are in circles because I gave them a border-radius of 50% in the CSS. We want to hire a programmer to do the Following:

1. Write the CSS to make buttons look like tabs - with square bottom angles and rounded top angles
2. CSS for giving spacing between tabs of 3px
3. CSS for giving each tab a border of 3px that is black
4. CSS for when button is selected - the inverse color for icon and text, and background of button is shown
5. CSS for slowing down the ripple effect when pushed, and anything cool to do here
6. CSS or Jscript to make the backgrounds of the tab buttons & text fade to transparent as the user scrolls - only displaying the icons.
7. CSS for if hover over the tab button, it changes to invert colors / outlines like in #4

We need this to be delivered as plug and play code right directly into our scss files within our Ionic app.
Related categories: JavaScript CSS HTML5 AngularJS Ionic Framework