Component
Gradient Border Button
This demo perfectly demonstrates how to achieve gradient borders in Framer using a simple trick. The gradient border on this button is animated, and the line goes around the element, making it "pop".
Created by
About the resource
This effect is achieved with a component that has multiple variants, all connected in a way that allows them to endlessly loop between states.
The gradient border is created using a radial gradient background that is hidden by another element above it with a solid fill. This approach leaves a 1-2px gap around the button's edges, where the radial gradient background can be seen.
About the resource
This effect is achieved with a component that has multiple variants, all connected in a way that allows them to endlessly loop between states.
The gradient border is created using a radial gradient background that is hidden by another element above it with a solid fill. This approach leaves a 1-2px gap around the button's edges, where the radial gradient background can be seen.
About the resource
This effect is achieved with a component that has multiple variants, all connected in a way that allows them to endlessly loop between states.
The gradient border is created using a radial gradient background that is hidden by another element above it with a solid fill. This approach leaves a 1-2px gap around the button's edges, where the radial gradient background can be seen.
