Directory

gradient-button - Vaadin Add-on Directory

This is a material button with the beautiful gradient colours with the animations on hover. gradient-button - Vaadin Add-on Directory
[![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)