React 3D Button

Explore Themes

5 Beautiful Themes

Choose Your Theme

Select a theme to see it in action. All themes are included in the package and can be imported with a single line.

Live Preview - Default Theme

Button Types

Sizes

States

How to use Default theme

import { Button3D } from 'react-3d-button';
import 'react-3d-button/styles';

function App() {
  return (
    <Button3D type="primary">
      Click Me!
    </Button3D>
  );
}

Create Your Own Theme

Override CSS variables to create a custom theme that matches your brand. Try it live below:

Customize Colors

Live Preview

/* In your CSS file or styled component */
.my-custom-theme .aws-btn {
  --button-primary-color: #6366f1;
  --button-primary-color-dark: #4f46e5;
  --button-primary-color-light: #ffffff;
  --button-primary-color-hover: #6366f1;
}

/* Or use inline styles in React */
<div style={{
  '--button-primary-color': '#6366f1',
  '--button-primary-color-dark': '#4f46e5',
  '--button-primary-color-light': '#ffffff',
}}>
  <Button3D type="primary">Custom Button</Button3D>
</div>

Available CSS Variables

All available CSS variables you can override for each button type:

/* Colors for each button type */
--button-primary-color
--button-primary-color-dark
--button-primary-color-light
--button-primary-color-hover

--button-secondary-color
--button-secondary-color-dark
--button-secondary-color-light
--button-secondary-color-hover

--button-success-color
--button-error-color
--button-warning-color
--button-info-color
--button-danger-color
--button-tertiary-color
--button-anchor-color

/* 3D Effect */
--button-raise-level: 6px;
--button-hover-pressure: 2;

/* Transitions */
--button-transition-duration: 0.3s;

/* Sizes */
--button-padding-small: 8px 16px;
--button-padding-medium: 12px 24px;
--button-padding-large: 16px 32px;

/* And more... */