Hi
Is there a stack that does gradient borders?
Gradient borders on buttons?
This site has examples of some:
Thanks!
Not sure but you may be able to do this in Foundation 6 (if you use it) by applying a gradient swatch or css class to the border. Only other way I can think of is to use a container stack that support background gradients and then put your content stack inside, setting the margin of the content stack (or padding of the container stack) so that there is a ‘border’ of the required thickness showing the edges of the background gradient. Not tried either so just thinking aloud.
1 Like
Thanks for the suggestion, will try!
I just did this with a button in the psychedelic stack from Doobox (this has an animated gradient that changes at a speed you set but it’s similar in principle to any container stack that supports gradients). Definitely works - just need to play with the width and margin settings as they may not be equal on all sides. Also remove button border and shadow if they are options.
1 Like
Using Source, you could create a CSS grid with the Grid Plus stack, using a custom row and column using 5px 1fr 5px for both where the 5px is the border size (adjust to taste). Put your button n the centre, i.e. col2 row 2, and then setup whatever border gradient or animated gradient or whatever effect you want to fill the grid, i.e. 3 cols and 3 rows, which will appear as the border around the button.
1 Like