react-button-nice

Adding nice hover and active effect into your buttons

Usage no npm install needed!

<script type="module">
  import reactButtonNice from 'https://cdn.skypack.dev/react-button-nice';
</script>

README

react-button-nice

Adding hover/active effects into your buttons.

Screenshot

Demo link

Using wrapped element background-color and border-radius to generate effect.

import ButtonNice from 'react-button-nice';

const btnDefaultStyle = {
  padding: '16px 32px',
  cursor: 'pointer',
  fontSize: 16,
  color: 'white',
  border: 'none',
  borderRadius: '40px',
  outline: 'none',
  width: 300,
};

<ButtonNice>
  <button style={{ ...btnDefaultStyle, backgroundColor: '#843CC7' }}>
    Your button
  </button>
</ButtonNice>

Component props

props default desc
wrapperColor null it disables auto-color-matching and use custom color
speed 400ms transition speed
alpha 0.4 opacity for effect
disabled false disabling wrapper and wrapped component

Tested on Chrome 70+, Firefox 63+, Opera 56+, Safari 12+, Edge 15+, IE 10+