Curved Bottom App Bar With FAB In HTML/CSS

Sanyam Singh — Sat, 06 Jun 2020 07:24:20 +0000

Inspiration

While working on Flutter’s Bottom AppBar I was astounded to see how simple it is to build a curved bottom app bar with fab (floating action button) icon in between. So I decided to try and build it out in html, css to see how well it works. Surprisingly, using css to achieve such design wasn’t as easy as I thought it would be

What do we want to achieve

Bottom App Bar with Floating action button in the center

Solution

Lets start by adding a div at the bottom with 3 tabs. (left tab, right tab and middle tab that would hold FAB button)

In the above code, you can see 3 tab divs with class .tab--left, .tab--right and the most important one .tab--fab. It contains a div with class .top. Keep this div in mind as we are gonna hack the s**t out of .top div



<div class="tab tab--fab">
  <div class="top">
   <div class="fab"> + </div>
  </div>
</div>

Achieving rounded corners in tabs

So before talking about tab--fab lets first understand how we can achieve curviness in tab--left and tab--right. This can be done using css property border-top-left-radius and border-top-right-radius



.tab--left{
  border-top-right-radius: 30px;
}
.tab--right{
  border-top-left-radius: 30px;
}

Achieving curviness in your FAB tab

There are 3 parts to build a Curved tab with FAB on top of it

tab div containing .top div and .fab button

div.top inside .tab div

FAB button inside .tab div

tab — fab: This will contain a div will a class .top and our FAB button
div.top: This will be used to create curve and keep transparency
div.fab: The actual rounded FAB button

Styling our middle tab

Please go through the comments in above code.

As I said before .top is the key as it will produce a curve using border-bottom-left-radius and border-bottom-right-radius. If you do not make this div transparent it will produce a solid shape as shown below, therefore transparency is important

Result of .top tab without background: transparent

Designing FAB Button

The above css is to build our rounded FAB button with + icon in the center.

Conclusion

Well, Thats it folks. You can find complete code in below codepen.

DEV Community: Sanyam Singh