Create React Awesome 3D Button

By Tell Me How January 18, 2018 #3d-buttons, #animated-button, #animated-buttons, #button, #button-animation, #buttons, #css-modules, #progress-button, #react, #reactjs, #reactjs-components, #ui-component, #ui-components

ReactJS light weight performant Component that renders an animated set of progress and social share enabled 3D UI buttons. The React Awesome 3D Button is a performant, extendable, highly customisable, production ready react component that renders an animated basic set of UI buttons.

Download

If you want to download react-awesome-button library then you’ve to click on below button but before download you’ve to unlock that button.

Struts2 AngularJS Insert Operation Full Example

Examples

With React Awesome 3D Button (react-awesome-button) and plain CSS

import { AwesomeButton } from 'react-awesome-button';
  import 'react-awesome-button/dist/styles.css';

  function Button() {
    return (
      <AwesomeButton type="facebook">Button</AwesomeButton>
    );
  }

With Awesome 3D Button (react-awesome-button) CSS Modules

import { AwesomeButton } from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss'

  function Button() {
    return (
      <AwesomeButton
        cssModule={AwesomeButtonStyles}
        type="twitter"
      >
        Share
      </AwesomeButton>
    );
  }

Key Features

Look and feel customisable and extendable via SASS variables and lists (scss config file)
Use it with CSSModules or Plain CSS (NO inline-styles)
Render any tag as the component’s child (text, icon, img, svg)
Animated progress button
OnClick bubble animation

Android FabulousFilter – Animate Filter with Floating Action Button

Attributes	Type	Default	Description
action	`function`	`null`	Default click function
bubbles	`bool`	`false`	Should render the bubbles onClick animation
disabled	`bool`	`false`	Should render a disabled button
type	`string`	`"primary"`	Render a specific button type, styled by the .scss type list
size	`string`	`"auto"`	Render a specific button size, styled by the .scss size list
element	`node`	`null`	Overwrites the default container element renderer, useful for using it with react-router Link container.
href	`string`	`null`	Forces the button to be rendered on an `anchor` container and sets the href to the specified value
target	`string`	`null`	Render an anchor with a specific target attribute
progress	`bool`	`false`	Should render a progress button
loadingLabel	`string`	`"Wait .."`	Progress button loading label text
errorLabel	`string`	`"Error"`	Progress button error label text
successLabel	`string`	`"Success"`	Progress button success label text
visible	`bool`	`true`	Should the button be visible