Skip to main content

​
Overview

The BotonFlotante component is a fixed-position floating action button (FAB) that provides quick navigation back to the previous page. It uses Material-UI’s Fab component with custom styling and hover animations.

​
Props

This component does not accept any props. It automatically uses React Router’s navigation.

​
Usage

The component is used on the project detail page to allow users to quickly return to the previous page:
src/pages/ProyectoDetalle.jsx
import BotonFlotante from "../components/BotonFlotante";

function DetalleProyecto() {
  return (
    <div>
      {/* Page content */}
      <BotonFlotante />
    </div>
  );
}

​
Component Structure

src/components/BotonFlotante.jsx
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { Fab } from "@mui/material";
import { useNavigate } from "react-router-dom";

function BotonFlotante() {
  const navigate = useNavigate();
  return (
    <Fab
      aria-label="volver"
      onClick={() => navigate(-1)}
      sx={{
        position: "fixed",
        bottom: 30,
        right: 30,
        zIndex: 1000,
        backgroundColor: "#15F5BA",
        color: "#211951",
        width: "60px",
        height: "60px",
        boxShadow: "0 0 15px rgba(21, 245, 186, 0.6)",
        border: "2px solid #211951",
        transition: "all 0.3s ease",
        "&:hover": {
          backgroundColor: "#836FFF",
          color: "#F0F3FF",
          transform: "scale(1.1) rotate(-10deg)",
          boxShadow: "0 0 25px rgba(131, 111, 255, 0.8)",
        },
      }}
    >
      <ArrowBackIcon sx={{ fontSize: "2rem" }} />
    </Fab>
  );
}

​
Key Features

​
Fixed Positioning

The button remains visible in the bottom-right corner regardless of scroll position:
  • Position: Fixed at bottom: 30px, right: 30px
  • Z-index: 1000 ensures it appears above other content
  • Size: 60x60px circular button
Uses React Router’s navigate(-1) to return to the previous page: 
const navigate = useNavigate();
onClick={() => navigate(-1)}
This provides browser-like “back” functionality.

​
Visual Styling

PropertyDefaultHover
Background#15F5BA (cyan)#836FFF (purple)
Text color#211951 (dark)#F0F3FF (light)
Box shadow15px glow25px glow
Transformnonescale(1.1) + rotate(-10deg)

​
Animations

The button features smooth transitions:
  • Scale: Grows 10% on hover
  • Rotation: Rotates -10 degrees
  • Color shift: Cyan to purple gradient
  • Glow effect: Shadow intensity increases
  • Duration: 0.3s ease transition

​
Accessibility

aria-label="volver"
Provides screen reader description (“return” in Spanish).

​
Material-UI Components

  • Fab - Floating Action Button from @mui/material
  • ArrowBackIcon - Back arrow icon from @mui/icons-material

​
Dependencies

package.json
{
  "@mui/material": "^7.3.6",
  "@mui/icons-material": "^7.3.6",
  "react-router-dom": "^7.11.0"
}

​
Customization

​
Change Position

// Left side
bottom: 30,
left: 30,

// Top right
top: 30,
right: 30,

​
Change Colors

// Green theme
backgroundColor: "#00C853",
color: "#FFFFFF",
"&:hover": {
  backgroundColor: "#00E676",
}

​
Change Icon

import HomeIcon from "@mui/icons-material/Home";

<Fab>
  <HomeIcon sx={{ fontSize: "2rem" }} />
</Fab>

​
Change Size

// Smaller button
width: "48px",
height: "48px",

// Larger button
width: "72px",
height: "72px",

​
Best Practices

Use fixed positioning sparingly to avoid cluttering the interface. The FAB should only appear on detail pages where users may want to quickly navigate back.
The rotate animation on hover adds personality and draws attention to the button’s interactivity.

TrophyButton

Another interactive button with animations

FlipScienceCard

Interactive card with hover effects

Build docs developers (and LLMs) love

Get started for freeTalk to us