gradient-button - Vaadin Add-on Directory
This is a material button with the beautiful gradient colours with the animations on hover.
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)
[![NPM version](https://badge.fury.io/js/badge-list.svg)](http://badge.fury.io/js/badge-list)
[![GitHub version](https://badge.fury.io/gh/boennemann%2Fbadges.svg)](http://badge.fury.io/gh/boennemann%2Fbadges)
[![Bower version](https://badge.fury.io/bo/badges.svg)](http://badge.fury.io/bo/badges)
# \
This is a gradient button with the attractive colours and hover effects and is created by using vanilla web component.
![demo](demo.gif)
```html
Button
Button
```
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Avaliable in various colours
![Coloured buttons](colors.png)
```html
Button
Button
Button
Button
Button
Button
```
## In round borders
![round buttons](round.png)
```html
Button
Button
Button
Button
Button
Button
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Browser Support
Using the [webcomponents.js](https://github.com/WebComponents/webcomponentsjs):
![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/chrome/chrome_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/opera/opera_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/firefox/firefox_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/safari/safari_48x48.png) |![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/edge/edge_48x48.png) |
:---: | :---: | :---: | :---: | :---: | :---: |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔
## License
[MIT](https://github.com/Kedar-K/gradient-button/blob/master/LICENSE)
View on GitHubView on NPM
gradient-button version 0.1.0
### Dependencies
gradient-button version 0.0.2
### Dependencies
gradient-button version 0.1.2
### Dependencies
gradient-button version 0.2.2
### Dependencies
gradient-button version 1.0
### Dependencies
gradient-button version 1.0.1
### Dependencies
gradient-button version 1.0.0
### Dependencies
gradient-button version 2.2.2
### Dependencies
gradient-button version 2.2.3
### Dependencies
* latest-version#^4.0.0
* stable#^0.1.8