带有圆形中心按钮的页脚 UI

Question

I have a problem centering a button on the footer. I have two icons on the left and right, I am able to create the UI but it does not look the same(the center icon is a little weird with padding and shadow). I am using material-ui . Here's the picture of what I would like to create:

Here's the code sandbox URL: https://codesandbox.io/s/footer-mobile-responsive-icvvs?file=/src/App.js

Component code :

<AppBar position="fixed" className="footer__app-bar">
    <Toolbar disableGutters className="footer__toolbar">
      <Link href="/">
        <div className="footer__home">
          <img src={HomeIcon} alt="home" />
          <div className="footer__home-title">HOME</div>
        </div>
      </Link>

      <Link href="/book">
        <>
          <div className="footer__book-fab-container">
            <Fab aria-label="book">
              <img src={CalendarIcon} alt="book" />
            </Fab>
          </div>
          <div className="footer__book-title">BOOK</div>
        </>
      </Link>

      <Link href="/profile">
        <div className="footer__profile">
          <img src={ProfileIcon} alt="profile" />
          <div className="footer__profile-title">PROFILE</div>
        </div>
      </Link>
    </Toolbar>
  </AppBar>

Styles:

.footer__app-bar {
background-color: $color-white;
color: $color-black;
top: auto;
bottom: 0;
box-shadow: 0px -5px 23px -5px rgba(0, 0, 0, 0.17);
font-family: AvenirNext;
padding: 0px 35px 0px;
.footer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .footer__home {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img {
      width: 18px;
      height: 19px;
    }
    .footer__home-title {
    }
  }
  .footer__book-fab-container {
    position: absolute;
    z-index: 1;
    top: -28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 10px solid white;
    width: 76px;
    border-radius: 50%;
    box-shadow: 0px -5px 23px -5px rgb(0 0 0 / 17%);
    img {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    .footer__book-title {
    }
  }
  .footer__profile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img {
      width: 15px;
      height: 20px;
    }
    .footer__profile-title {
    }
  }
}
}

How can I create the exact same UI?

Answer 1

I have done some work and tried to achieve above image. Can you replace your css and container code from below and check.
CSS:

.footer__app-bar {
  // margin: 20px;
  background-color: white;
  color: black;
  top: auto;
  bottom: 0;
  box-shadow: 0px -5px 23px -5px rgba(0, 0, 0, 0.17);
  font-family: AvenirNext;
  padding: 0px 35px 0px;
  height: 80px;
  .footer__toolbar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .footer__home {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img {
        width: 18px;
        height: 19px;
      }
      .footer__home-title {
       
      }
    }
    .footer__book-fab-container-dummy {
      box-shadow: 1px -3px 23px 3px rgb(0 0 0 / 17%);
      height: 26px;
      width: 65px;
      z-index: -8;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;
      position: absolute;
      top: -47px;
      left: 290px;
      background: transparent;
    }

    .footer__book-fab-container {
      height: 43px;
      width: 84px;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;

      top: -52px;
      background: WHITE;
      position: absolute;
      .MuiFab-root {
        position: absolute;
        top: 14px;
        left: 14px;
      }
      img {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
     
    }

    
  .footer__book-fab-container:before,
    .footer__book-fab-container:after {
        content: "";
        position: absolute;
        height: 10px;
        width: 20px;
        bottom: 0;
    }

    .footer__book-fab-container:after {
        right: -20px;
        border-radius: 0 0 0 10px;
        -moz-border-radius: 0 0 0 10px;
        -webkit-border-radius: 0 0 0 10px;

        -webkit-box-shadow: -10px 0 0 0 #fff;
        box-shadow: -10px 0 0 0 #fff;
    }

    .footer__book-fab-container:before {
        left: -20px;

        border-radius: 0 0 10px 0;
        -moz-border-radius: 0 0 10px 0;
        -webkit-border-radius: 0 0 10px 0;

        -webkit-box-shadow: 10px 0 0 0 #fff;
        box-shadow: 10px 0 0 0 #fff;
  }
  

    .footer__book-title {
      margin: 20px 0 0 20px;
    }
    .footer__profile {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img {
        width: 15px;
        height: 20px;
      }
      .footer__profile-title {
      }
    }
  }
}

HTML:

  <div className="App">
      <AppBar position="fixed" className="footer__app-bar">
        <Toolbar disableGutters className="footer__toolbar">
          <div className="footer__home">
            <img src={HomeIcon} alt="home"/>
            <div className="footer__home-title">HOME</div>
          </div>

          <div>
            <div className="footer__book-fab-container-dummy">
            </div>
            <div className="footer__book-fab-container">
              <Fab aria-label="book">
                <img src={CalendarIcon} alt="book" />
              </Fab>
            </div>
            <div className="footer__book-title">BOOK</div>
          </div>

          <div className="footer__profile">
            <img src={ProfileIcon} alt="profile" />
            <div className="footer__profile-title">PROFILE</div>
          </div>
        </Toolbar>
      </AppBar>
    </div>

Codepen link