react-button-nice v1.0.5

react-button-nice

Adding hover/active effects into your buttons.

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

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