How would you approach this button?
I've tried using as background image but it's not reponsive for full width buttons.
23 Replies
I'm using background Image but It's not responsive.
is this applied or used in any of the site
drop the link if
it has been
I havan't seen it anywhere actually
You could use a clip-path
I have created a demo.
https://codepen.io/cbolson/pen/LYwRLYM
The clip-path might appear complicated as it has a lot of points to generate each "step" in the corners.
I have used custom properties to simplify this and added comments to hopefully make it clearer.
@Chris I managed to implement it with pseudo classes though..
Thanks to my daily dose of css battles 😅
Here's the pen:
https://codepen.io/eioluseyi/pen/abemwre
Nice!
Just a heads-up - it doesn't completely work on Firefox.
The bottom section isn't showing as it doesn't support -webkit-box-reflect
I guessed as much.
But I wasn't ready to check ff.. 😅
you could possibly do all of this with just your conic-gradients
Hmm.. can you show me how?
https://codepen.io/cbolson/pen/xxvELrZ
I just looked at the first (filled) version and didn't get to the second outline version.
No doubt somebody better versed with conic-gradients could come up with a simpler version 🤔
I am also not convinced by my use of psuedo elements for the top and left-hand borders. These could probably be achieved by gradients too but I have to get on and do some work 😆
Oh nice..
I really tried to do this, but couldn't figure it out.
Thanks.
I would have loved to see the parts you deleted commented out instead though; it could work like some sort of diff 😅
But I actually get what's going on here 👍
And based on this, I already see how to do it with just one pseudo 😅
This is quite interesting
I'm on mobile and something with my keyboard and codepen, it keeps deleting what I write , so this isn't well organized w custom variables etc but here's one attempt. Clip-paths would be my second attempt and svg would be my third.
This one is with pseudo-elements
https://codepen.io/Miss-Fox/pen/JjgRyrK
Sorry about that. I do actually leave the “deleted” code in but for some reason I deleted it this time 🙏
Found a few minutes to update my latest version.
I achieved all the borders using gradients and was able to completely remove the pseudo elements.
Again, I have only looked at the first "full" button.
the fix to making this responsive while using an image is to use
border-image instead of background-imagedid you save?
I'm still seeing the old version
here the first outline with conic gradients and transparent bg, but with the use of @property to make the fill on hover happen
https://codepen.io/MarkBoots/pen/mdNrGdR?editors=1100
--note: i just noticed that i didnt scroll all the way down to see all answers. i was looking at reactions from a few hours ago.. oopsie 😉
Yes, it is saved. Probably your cache.
The great thing about CSS (and programming in general) is that there are many ways to achieve the same thing 😀
yea absolutely, just wanted to see if i could get rid of the matching bgcolor with the page
You guys are just awesome.
Thank you so much everyone