# Draw Corners (`.sds-btn-draw-corners`)

Four corner brackets pop in from outside and snap onto the corners with spring. Buttons animation in SDS Motion Forge v5.0.0. It loops continuously as soon as the class is applied.

- Page: https://sds-motion-forge.netlify.app/animations/btn-draw-corners/
- Category: Buttons (https://sds-motion-forge.netlify.app/categories/buttons/)
- Animated properties: opacity, transform
- Compositor-only: yes
- Needs child elements: no
- Needs per-character spans: no
- JavaScript: none required

## Use it

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/buttons.min.css" />

<button class="sds-btn-draw-corners">Button</button>
```

## How it works

Plays as soon as the class is applied, looping continuously. It animates opacity and movement and scale (transform) — compositor-only, so it never causes page reflow. `--sds-duration-slower` controls the speed and `--sds-ease-spring` controls the feel — override either on the element or :root (the sds-fast/sds-slow modifier classes do exactly that).

## Related

- [Draw Cross](https://sds-motion-forge.netlify.app/animations/btn-draw-cross/)
- [Draw Dash](https://sds-motion-forge.netlify.app/animations/btn-draw-dash/)
- [Draw Perimeter](https://sds-motion-forge.netlify.app/animations/btn-draw-perimeter/)
- [Draw Pulse Frame](https://sds-motion-forge.netlify.app/animations/btn-draw-pulse-frame/)
- [Underline Orbit](https://sds-motion-forge.netlify.app/animations/btn-draw-underline-orbit/)
- [Crystal](https://sds-motion-forge.netlify.app/animations/btn-crystal/)
- [Depth Press](https://sds-motion-forge.netlify.app/animations/btn-depth-press/)
- [Dissolve](https://sds-motion-forge.netlify.app/animations/btn-dissolve/)