Draw smooth borders around any element, with Svelte
npm i svelte-draw-borderCurrently the animation is only triggered on hover.
<script>
import DrawBorder from 'svelte-draw-border';
</script>
<DrawBorder initialColor="green" endColor="white">
<button>Submit</button>
</DrawBorder>| Name | Type | Default | Description |
|---|---|---|---|
| borderRadius | string | '0px' | Works with any valid CSS border-radius value |
| borderWidth | string | '2px' | Use px, ems, or rems |
| initialColor | string | 'transparent' | Works with any valid CSS color value |
| endColor | string | 'green | Works with any valid CSS color value |
| startingDeg | number | 90 | The position of the animation start, 0 being the middle & top of the target element |
| direction | 'clockwise', 'counter-clockwise' | 'clockwise' | The direction of the animation |