Create React Awesome 3D Button

0
77

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.

Example : React Awesome 3D Button
Example : React Awesome 3D Button

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

 

Hope you like this article and if it is helpful then share with your friends.

 

 

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...