fab.css

nav.bottom-menu {
	margin: 0.5em;
	position: fixed;
	bottom: 0;
	right: 0;
}
nav.bottom-menu:hover .buttons:not(:last-of-type) {
	width: 30px;
	height: 30px;
	background-size: 17px;
	margin: 2px auto 0;
	opacity: 1;
}
nav.bottom-menu:hover .buttons:not(:last-of-type).categories {
	display: none;
}
nav.bottom-menu:hover .rotate {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_keyboard_arrow_left_white_24px.svg");
	transform: rotate(90deg);
}
nav.bottom-menu .buttons {
	display: block;
	width: 55px;
	height: 55px;
	margin: 2px auto 0;
	text-decoration: none;
	position: relative;
	border-radius: 50%;
	box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transition: .2s;
	background: #616161 url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_label_white_24px.svg") center no-repeat;
}
nav.bottom-menu .buttons:nth-last-of-type(2) {
	transition-delay: 20ms;
}
nav.bottom-menu .buttons:nth-last-of-type(3) {
	transition-delay: 40ms;
}
nav.bottom-menu .buttons:nth-last-of-type(4) {
	transition-delay: 60ms;
}
nav.bottom-menu .buttons:nth-last-of-type(5) {
	transition-delay: 80ms;
}
nav.bottom-menu .buttons:nth-last-of-type(6) {
	transition-delay: 100ms;
}
nav.bottom-menu .buttons:nth-last-of-type(1) {
	width: 50px;
	height: 50px;
	opacity: 1;
	border-radius: 50%;
}
nav.bottom-menu .buttons.home {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_home_white_24px.svg");
}
nav.bottom-menu .buttons.blog {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_library_books_white_24px.svg");
}
nav.bottom-menu .buttons.index {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_list_white_24px.svg");
}
nav.bottom-menu .buttons#categoiesSel {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_dashboard_white_24px.svg");
}
nav.bottom-menu .buttons#bakMenu {
	background-image: url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_back_white_24px.svg");
}
nav.bottom-menu .buttons:hover {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
	background-color: #212121;
}
nav.bottom-menu .buttons:hover:before {
	background-color: #212121;
}
nav.bottom-menu span {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
nav.bottom-menu span.rotate {
	background: #424242 url("https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_menu_white_24px.svg") center no-repeat;
	position: absolute;
	transition: .3s;
}
nav.bottom-menu [tooltip]:before {
	content: attr(tooltip);
	background: #616161;
	height: 20px;
	margin-right: 5px;
	border-radius: 8px;
	color: #FFF;
	font: 500 12px Roboto;
	white-space: nowrap;
	position: absolute;
	bottom: 0;
	right: 100%;
	opacity: 1;
	transition: .3s;
	padding: 5px 9px;
	line-height: 20px;
}
nav.bottom-menu [tooltip]:hover:before {
	visibility: visible;
	opacity: 1;
}