https://github.com/polydile/dile-rounded-button
Web Component to implement a button with rounded corners.
https://github.com/polydile/dile-rounded-button
Last synced: 2 months ago
JSON representation
Web Component to implement a button with rounded corners.
- Host: GitHub
- URL: https://github.com/polydile/dile-rounded-button
- Owner: Polydile
- License: mit
- Created: 2019-07-13T10:56:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T04:30:00.000Z (over 3 years ago)
- Last Synced: 2025-09-25T05:24:09.905Z (9 months ago)
- Language: JavaScript
- Size: 2.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
Web component to implement a styled button, with background color and rounded corners. Based on LitElement.
Go to [DEMOS page](https://dile-rounded-button.polydile.com)!
## Properties
- **disabled**: Boolean property to make the button disabled.
## Styles
You can customize it using CSS Custom Properties.
Custom property | Description | Default
----------------|-------------|---------
--dile-rounded-button-border-radius | Button border radius | 30px
--dile-rounded-button-background-color | Button background color | #e74c3c
--dile-rounded-button-height | Height of the button | 30px
--dile-rounded-button-text-color | Button text color | #fff
--dile-rounded-button-hover-background-color | Button hover background color | #303030
--dile-rounded-button-hover-text-color | Button hover text color | #fff
--dile-rounded-button-animation-time | Hover button color animation | 0.3s
--dile-rounded-button-padding-x | Horizontal padding | 20px
--dile-rounded-button-padding-y | Vertical padding | 5px
--dile-rounded-button-text-transform | Text transform | uppercase
--dile-rounded-button-font-size | Button text size | 1em
--dile-rounded-button-font-weight | Button font weight | normal
## Events
This component dispatch a custom event when the user clicks the button
- **dile-rounded-button-click**: there was a click in the button. If the button is in disabled state, the component do not dispatch the event.