How to create buttons with torn | distressed paper edges effect? (old paper edges look)
I am excited to this one!, I tried searching about this. I want to make button something like in below examples sites. Please anyone can teach me how to do that?
7 Replies
Valheim
The official Valheim page.
would you mind removing the attachments? We don't allow binary attachments for safety reasons.
the only way I can do that for you is by deleting your post
Ok I will delete the post and re-post again
you can just remove the attachments, you should have a little X on the files
Kevin Powell
YouTube
mask-image lets you do some really cool stuff
Add some creativity to your designs with mask-image!
🔗 Links
✅ Browser support: https://caniuse.com/?search=mask-image
⌚ Timestamps
00:00 - Introduction
00:30 - Setting things up to fade out the image
00:58 - Fading it out
02:30 - Fixing the layout
03:15 - Improving the fade out
03:52 - Masking with shapes
#css
--
Come hang out with other d...
you can attach images and video if you want, @Greatest Lord, but they have to embed. No downloads other than plain text.
anyway, to answer your question as to how this particular site does it, they use SVGs with embedded raster images, and refer to a clipPath defined further down in the file to crop it with a path. You can poke about in the devtools, and read about the clip path here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
What Mannix said will work too, and is potentially a little easier to follow
I have deleted videos
Ok but the problem comes when using clip-path button text may be overflow???
Oh, I realized, Kevin explained it clearly. Thank you for your quick help