Curved Bottom App Bar With FAB In HTML/CSS

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)

	<div class="bottom-appbar">
	<div class="tabs">
	<div class="tab is-active tab--left">
	<span>Dashboard</span>
	</div>
	<div class="tab tab--fab" @click="openDiscovery">
	<div class="top">
	<div class="fab"> + </div>
	</div>
	</div>
	<div class="tab tab--right">
	<span>Favourites</span>
	</div>
	</div>
	</div>

view raw BottomAppBar.html hosted with ❤ by GitHub

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

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

Styling our middle tab

	&--fab {
	width: 180px;
	height: 100%;
	background: transparent; // Curve will only be possible if our whole tab is transparent
	border: none; // must be borderless
	.top { // This will produce a curve under FAB button
	width: 100%;
	height: 50%;
	border-bottom-left-radius: 100px; // Left Curve
	border-bottom-right-radius: 100px; // Right Curve
	background-color: transparent; // If you add a color here it will produce a solid shape rather than a curve
	box-shadow: 0px 30px 0px 25px #fff; // Will submerge our curve with left and right tab's border
	border-bottom: 1px solid rgba(167, 161, 161, 0.69);
	}
	}

view raw Styles.scss hosted with ❤ by GitHub

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

	.fab {
	border-radius: 50%;
	background-color: #fe989c;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
	font-weight: bold;
	font-size: 22px;
	color: #fff;
	position: absolute;
	transform: translate(2px, -60%);
	}

view raw Fab.scss hosted with ❤ by GitHub

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.