Transform your traditional link into beautiful button
npm i beautylinks --save
import { beautylinks } from 'beautylinks';
<a href="/go/to/somewhere" class="theLink">My Beauty Link</a>
beautylinks({
domID: 'theLink',
padding: '10px',
width: '100%',
backgroundType: 'linear',
solidColor: 'yellow',
degrees: 90,
firstPortion: 0,
secondPortion: 100,
firstColor: '#fff',
secondColor: '#000',
fontColor: 'brown',
});
support options :
| Option Name | Description | Value Set | Default Value |
|---|---|---|---|
| domID | Element ID you want to transform (required) | string | |
| padding | Padding value | px, rem, % | 10px |
| width | Width value | px, rem, % | 100% |
| backgroundType | Color style for background | solid, linear, radial | solid |
| solidColor | Color code for solid background | color Hexcode or color name | #000 |
| degrees | Color position degrees value for linear | number | 90 |
| firstPortion | First color portion between 0 - 100% only for linear & radial type | percent | 0% |
| secondPortion | Second color portion between 0 - 100% only for linear & radial type | percent | 100% |
| firstColor | Color code for left position only for linear & radial type | color Hexcode or color name | #fff |
| secondColor | Color code for right position only for linear & radial type | color Hexcode or color name | #000 |
| fontColor | Color for fonts | color Hexcode or color name | #000 |
beautylinks - Created by Agung Setiawan
beautylinks is one of my long term project call is Html Rocks, I will more and more additional project to make easy for create beautiful html style with ease implementation.