scrwd,
@scrwd@mastodon.social avatar

Does anybody have a better way to do gradient border buttons (or boxes) with transparent background and flexible dimensions?

Here I'm using a strange-scaling SVG image as a mask over a gradient fill - it works and allows buttons of any width or size, but has a few too many "parts" for my liking.

https://codepen.io/jon/pen/yLrygwa

P.S. border-image is not a solution here because it would distort the gradient.

css,
@css@front-end.social avatar
scrwd,
@scrwd@mastodon.social avatar

@css ha, I was hoping you had something these look a bit slicker and easier to work with than my solution - I will investigate! Some new (to me) things there too - mask-composite!

css,
@css@front-end.social avatar

@scrwd Another idea without pseudo element and more suitable for your case since you want a gradient text as well, but only chrome support it: https://codepen.io/t_afif/pen/jOREBVy/1af3dd92a28d956cd8f92454b6b8c25f?editors=0100

  • All
  • Subscribed
  • Moderated
  • Favorites
  • CSS
  • GTA5RPClips
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • tacticalgear
  • cubers
  • Youngstown
  • mdbf
  • slotface
  • rosin
  • osvaldo12
  • ngwrru68w68
  • kavyap
  • InstantRegret
  • JUstTest
  • everett
  • Durango
  • cisconetworking
  • khanakhh
  • ethstaker
  • tester
  • anitta
  • Leos
  • normalnudes
  • modclub
  • megavids
  • provamag3
  • lostlight
  • All magazines